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

options

@default []

The set of knob values to use in the knob.

Accepts numeric, string or object.

References

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

variant

@default ''

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

References

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

value-key

@default 'value'

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

References

label-key

@default 'label'

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

References

start-angle

@default 30

Specify the starting angle to use on the knob.

References

end-angle

@default 30

Specify the ending angle to use on the knob.

References

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

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

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

slider-snap-to

@default false

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

References

anchor-offset

@default 0

Specify an offset for anchors.

This is a integer that will be a pixel value.

References