固執的滑動條

停用時絕不妥協的滑動條。( ・ิω・ิ)

使用範例

基本用法

當狀態為 disabled 時，拉動握把會越拉越長，還會越拉越緊。ᕕ( ﾟ ∀。)ᕗ

停用

目前數值：50

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 border border-gray-300 p-6">
    <base-checkbox
      v-model="disabled"
      class="w-full border rounded p-4"
      label="停用"
    />

    <div class="flex flex-col flex-1 justify-center">
      目前數值：{{ Math.floor(value) }}

      <slider-stubborn
        v-model="value"
        :disabled="disabled"
        :max-thumb-length="thumbLength"
        class="w-full"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import { computed, ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import SliderStubborn from '../slider-stubborn.vue'

const { width, height } = useWindowSize()

const disabled = ref(false)
const value = ref(50)

const thumbLength = computed(() =>
  Math.min(width.value, height.value) / 3,
)
</script>

元件參數

樣式可隨意調整

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-10 border border-gray-300 p-8">
    <slider-stubborn
      v-model="value"
      disabled
      :max-thumb-length="thumbMaxLength / 4"
      thumb-color="#ff8d36"
      class="z-[999] w-full"
    />

    <slider-stubborn
      v-model="value"
      disabled
      :max-thumb-length="thumbMaxLength / 2"
      :thumb-size="40"
      class="z-[999] w-full"
    />
  </div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import { computed, ref } from 'vue'
import SliderStubborn from '../slider-stubborn.vue'

const { width, height } = useWindowSize()

const value = ref(50)

const thumbMaxLength = computed(() =>
  Math.min(width.value, height.value),
)
</script>

原理

使用 svg path 實現拉長與彎曲彈性效果。

注意！Σ(ˊДˋ;)

請不要將 overflow 設定為 hidden，否則握把拉長時會被裁切

原始碼

元件

、範例

API

Props

interface Props {
  modelValue: number;
  disabled?: boolean;
  min?: number;
  max?: number;
  /** 握把被拉長的最大長度 */
  maxThumbLength?: number;
  thumbSize?: number;
  thumbColor?: string;
  trackClass?: string;
}

Emits

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>()