Vue Knob / Guides / Sliders

The vue-knob component can also be used to setup simple "min" and "max" sliders that do not have any snap to nearest value behavior.

This can be useful for larger ranges with over 100 stopping points to make the control more natural and smoother.

Note that with larger value ranges precision goes down and it may be harder to accurately drag to a specific value.

#Enable Slider And Step By

To turn this on simply add the slider flag.

We can also optionally set the step value to accommodate our range.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
        slider
        :slider-step-by="0.5"
        :slider-snap-to="false"
    />
</template

<script>
    export default {
        data() {
            return {
                knob: {
                    value: 1,

                    options: [{
                        value: 0,
                        label: '0%'
                    }, {
                        value: 25,
                        label: '25%'
                    }, {
                        value: 50,
                        label: '50%'
                    }, {
                        value: 75,
                        label: '75%'
                    }, {
                        value: 100,
                        label: '100%'
                    }]
                }
            }
        }
    }
</script>