<!-- Slider component wrapper -->
<script setup lang="ts">
import { ElSlider } from 'element-plus';
import { ref } from 'vue';

// Control value
const value = defineModel<number>();

// Generate marks to show on the slider
const marks = ref<Record<number, string>>({
    1: '1',
});

for (let i = 5; i <= 50; i += 5) {
    marks.value[i] = i.toString();
}
</script>

<template>
    <ElSlider class="slider" :min="1" :max="50" :marks v-model="value" />
</template>

<style lang="scss">
.slider.el-slider {
    --el-slider-main-bg-color: theme('colors.primary-500');
    --el-slider-border-radius: 0;
    --el-slider-runway-bg-color: theme('colors.neutral-500');
    --el-color-info: #909399;

    .el-slider__bar {
        @apply z-[1];
    }
}
</style>
