Knob     

Quasar Knob is another way of making the user select a Number value from a predefined range. With optional steps included. See demo.

Basic Usage

<q-knob
v-model="model"
:min="min"
:max="max"
></q-knob>
<!-- With custom placeholder -->
<q-knob
v-model="model"
:min="min"
:max="max"
:placeholder="'$ ' + model"
></q-knob>
<!-- Disabled state -->
<q-knob
disable
v-model="model"
:min="min"
:max="max"
></q-knob>

Vue Properties

Vue PropertyDescription
stepNumber representing difference between two values that the model can take. Default: 1.
minMinimum value that the model can take.
maxMaximum value that the model can take.
sizeCSS String determining the width and height of the Knob. Examples: “120px”, “12rem”.
placeholderPlaceholder to use.
colorPrimary CSS color of the Knob. Example: “blue”, “#ccc”.
trackColorTrack CSS color of the Knob. Example: “#e4e4e4”, “rgb(224, 200, 200)”.
lineWidthLine width of Knob.
readonlySort of a “display” only mode. Model cannot be altered.
disableWhen set to true the model cannot be altered.

Vue Events

Vue EventDescription
@inputTriggered on model value change with the new value.