<script setup lang="ts">
const { category, id } = defineProps(['category', 'id'])
</script>

<template>
    <div class="px-6">
        <h2>{{ category }}</h2>
        <input :id="`slider-${id}`" type="range" min="1" max="100" value="0" class="w-full"/>
        <div class="flex justify-between">
            <p>0</p>
            <p class="sliderSeparator">|</p>
            <p>25</p>
            <p class="sliderSeparator">|</p>
            <p>50</p>
            <p class="sliderSeparator">|</p>
            <p>75</p>
            <p class="sliderSeparator">|</p>
            <p>100</p>
        </div>
    </div>
</template>

<style>
.sliderSeparator {
    font-size: 0.8rem;
    align-self: center;
}

</style>