25 lines
1.4 KiB
Vue
25 lines
1.4 KiB
Vue
<template>
|
|
<Label class="flex justify-center items-center my-2">{{ label }}
|
|
<SliderRoot class="mx-4 relative flex items-center select-none touch-none w-[160px] h-5"
|
|
:default-value="model ? [model] : undefined" :v-model="[model]" :disabled="disabled"
|
|
@update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
|
|
<SliderTrack class="bg-light-30 dark:bg-dark-30 relative h-1 w-full data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10">
|
|
<SliderRange class="absolute bg-light-40 dark:bg-dark-40 h-full data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30" />
|
|
</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 border border-light-50 dark:border-dark-50
|
|
hover:border-light-60 dark:hover:border-dark-60 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20" />
|
|
</SliderRoot>
|
|
</Label>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { min = 0, max = 100, step = 1, label, disabled = false } = defineProps<{
|
|
min?: number
|
|
max?: number
|
|
step?: number
|
|
label?: string
|
|
disabled?: boolean
|
|
}>();
|
|
const model = defineModel<number>()
|
|
</script> |