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