29 lines
731 B
Vue
29 lines
731 B
Vue
<script setup lang="ts">
|
|
const { category, id, value } = defineProps(['category', 'id', 'value'])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-6">
|
|
<h2>{{ category }}</h2>
|
|
<input :id="`slider-${id}`" type="range" min="1" max="100" :value="value" 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> |