<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>