Vue Knob / Guides / Ranges

The vue-knob component can also be used to setup simple "min" and "max" ranges that do not display any intermediary values on the knob.

This is also very useful to reduce the number of elements generated if we have a large number range.

#Min / Max Range

A common case may be for setting a 0 to 100 range for percent values.

Ultimately we'll still want some precise value range but we only need to show a min and max label.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
        :skip-angle="90"
    />
</template

<script>
    export default {
        data() {
            return {
                knob: {
                    value: 1,
                    options: [{
                        value: 0,
                        label: '0%'
                    }, {
                        value: 1,
                        label: false
                    }, 
    
                    ...

                    {
                        value: 99,
                        label: false
                    }, {
                        value: 100,
                        label: '100%'
                    }]
                }
            }
        }
    }
</script>

#Including Anchors Only

We may also want to do some more specific customization to only show a few label points.

Setting label to false will also automatically hide the "anchor" element. If we still want to show the anchor elements for some specific styling they must be explicitly set to true then label value is false.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
        :skip-angle="90"
    />
</template

<script>
    export default {
        data() {
            return {
                knob: {
                    value: 1,
                    options: []
                }
            }
        },

        mounted() {
            var i = 0,
                ii = 100,
                options: [];

            for (; i <= ii; i++) {
                ((i) => {
                    options.push({
                        value: i,
                        label: false,
                        anchor: true
                    });
                })(i);
            }

            options[0].label = '0%';
            options[10].label = '10%';
            options[20].label = '20%';
            options[30].label = '30%';
            options[40].label = '40%';
            options[50].label = '50%';
            options[60].label = '60%';
            options[70].label = '70%';
            options[80].label = '80%';
            options[90].label = '90%';
            options[100].label = '100%';

            Vue.set(this.knob, 'options', options);
        }
    }
</script>