Vue Knob / Options / Core

The set of core options.

#value

@default null

The knob value to use with v-model or value prop.

The value will always return the original set in the options prop. So if the option value is 1 it will return 1 and if the option value is an object it will return that object.

#References

• Startup Guide

#options

@default []

The set of knob values to use in the knob.

Accepts numeric, string or object.

#References

• Labels Guide

#size

@default ''

Set the size for the knob which will get translated to a class-:size string such as knob-sm.

Supports xs, sm, md, lg, xl out of the box with a default to md size.

#References

• Startup Guide

#variant

@default ''

Allows setting a variant / theme class translated to a class-:variant string such as knob-primary.

#References

• Startup Guide

#min-speed

@default 30

Specify the knob's dial minimum rotation speed.

This a speed and not a timer so it will be a constant rate.

#References

• Startup Guide

#value-key

@default 'value'

Specify the "value" key to use when using objects in the options prop.

#References

• Labels Guide

#label-key

@default 'label'

Specify the "label" key to use when using objects in the options prop.

#References

• Labels Guide

#start-angle

@default 30

Specify the starting angle to use on the knob.

#References

• Angles Guide

#end-angle

@default 30

Specify the ending angle to use on the knob.

#References

• Angles Guide

#skip-angle

@default 150

Specify the tolerance for a rotation to be acceptable. Meaning a change in the knob higher than the specified value (150 default) will be ignored.

#References

• Ranges Guide

#slider

@default false

Toggle slider mode on or off.

In this mode, only the first and last option values are used and there is no snapping making the knob behave more as a generic slider.

It's also important to note that in this mode you must have at least two values set in options and they MUST be numeric values since the slider is auto calculating values.

You can still set intermediary labels for visual purposes and to click them to go directly to the value. However, they will in no way affect the value when dragging the knob.

#References

• Sliders Guide

#slider-step-by

@default 1

This works directly with the slider option to set a precision value when moving the knob.

For instance we want to allow 0.1, 0.5 or only whole number values, etc.

#References

• Sliders Guide

#slider-snap-to

@default false

Enable snap to nearest "step-by" value when using slider.

#References

• Sliders Guide

#anchor-offset

@default 0

Specify an offset for anchors.

This is a integer that will be a pixel value.

#References

• Angles Guide