<template>
    <div class="px-8">
        <label class="font-roboto pr-8">{{ label }}</label>
        <label class="px-4 py-2 font-roboto bg-blue text-white rounded-full">{{ selected }}/{{ max }}</label>

        <div class="py-4 w-auto">
            <div class="">
                <input
                    class="w-full accent-blue cursor-pointer"
                    type="range"
                    v-model="selected"
                    :min="min"
                    :max="max">
                <div class="-mt-2 flex w-full justify-between">
                    <span class="text-sm text-gray-600">{{ min }}</span>
                    <span class="text-sm text-gray-600">{{ max }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "RangeSlider",
    props: {
        label: {
            type: String,
            default: ''
        },
        min: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 10
        }
    },
    data() {
        return {
            selected: Math.round((this.max-this.min)/2)
        }
    },

}
</script>
