Vue Knob / Guides / Dial

It will be common to customize the dial appearance to get a custom look and feel. This is supported with slots and a variety of classes that should cover a majority of cases.

#Default Slot

This slot simply appends content to the end of the main knob element which allows adding any kind of overlay to the knob. This is useful for centering the current value in the center of the dial.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
    >
        <div
            class="knob-current"
        >
            {{ knob.value }}
        </div>
    </vue-knob>
</template

#Dial Slot

Content can also be inserted into the dial which will rotate accordingly. This is useful for inserting some icon or image for the rotating dial.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
    >
        <img
            slot="dial"
            src="/path/to/dial.png"
        />
    </vue-knob>
</template

#Index Skip

By default the dial requires a proper rotation from left to right and will not skip over the min/max in the opposite direction. This is to give the knob a realistic rotation. However, this can be overridden and the threshold for a skip can be tweaked using the index-skip prop.

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