Knob
Quasar Knob is another way of making the user select a Number value from a predefined range. With optional steps included. See demo.
Works well with QField for additional functionality such as a helper, error message placeholder and many others.
Installation
Edit /quasar.conf.js:
framework: {
components: ['QKnob']
}
|
Basic Usage
<q-knob
v-model="model"
:min="min"
:max="max"
/>
<q-knob
v-model="model"
:min="min"
:max="max"
:placeholder="'$ ' + model"
/>
<q-knob
disable
v-model="model"
:min="min"
:max="max"
/>
|
Vue Properties
Supports v-model which should be a Number.
| Vue Property | Type | Description |
|---|
size | String | CSS String determining the width and height of the Knob. Examples: “120px”, “12rem”. |
step | Number | Number representing difference between two values that the model can take. Default: 1. |
decimals | Number | Number of decimals to represent the model with, if no placeholder / default slot is used. |
min | Number | Minimum value that the model can take. |
max | Number | Maximum value that the model can take. |
color | String | One from Quasar Color Palette. |
track-color | String | One from Quasar Color Palette. |
line-width | String | Line width of Knob. Default is ‘6px’. |
readonly | Boolean | Sort of a “display” only mode. Model cannot be altered. |
disable | Boolean | When set to true the model cannot be altered. |
Vue Events
| Vue Event | Description |
|---|
@input(newVal) | Triggered immediately on model value change. |
@change(newVal) | Triggered on lazy model value change. |
@drag-value(val) | (v0.15.11+) Triggered while dragging (or clicking) on Knob. |
More Examples
Vue will soon supply the .lazy modifier for v-model on components too, but until then, you can use the longer equivalent form:
<q-knob
:value="model"
@change="val => { model = val }"
:min="min"
:max="max"
/>
|
We can go a step further and display the current value while dragging:
<q-knob
:value="model"
@change="val => { model = val }"
@drag-value="val => { currentValue = val }"
:min="min"
:max="max"
>
{{ currentValue }}
</q-knob>
|
Multi-colored with a Euro icon.
<q-knob
v-model="model"
size="120px"
style="font-size: 1.5rem"
color="secondary"
track-color="yellow-3"
line-width="5px"
:min="min"
:max="max"
:step="5"
>
<q-icon class="on-left" name="euro_symbol" /> {{model}}
</q-knob>
|
Read-only state (different than disabled, as the mouse pointer doesn’t change).
<q-knob
v-model="model"
:min="min"
:max="max"
color="primary"
readonly
>
<q-icon class="on-left" name="volume_up" /> {{model}}
</q-knob>
|
Using a QField to highlight error state.
<q-field
label="Knob"
icon="cake"
helper="Touch to change"
:error="knobHasError"
error-label="Invalid value selected."
>
<q-knob
v-model="model"
:min="min"
:max="max"
>
<q-icon class="on-left" name="volume_up" /> {{model}}
</q-knob>
</q-field>
|
Quasar 
