20 lines
971 B
Vue
20 lines
971 B
Vue
<template>
|
|
<Label class="flex justify-center items-center my-2">{{ label }}
|
|
<SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model ? [model] : undefined" :v-model="[model]" @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
|
|
<SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
|
|
<SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
|
|
</SliderTrack>
|
|
<SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
|
|
</SliderRoot>
|
|
</Label>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { min = 0, max = 100, step = 1, label } = defineProps<{
|
|
min?: number
|
|
max?: number
|
|
step?: number
|
|
label?: string
|
|
}>();
|
|
const model = defineModel<number>()
|
|
</script> |