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"
/>

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

<!-- Disabled state -->
<q-knob
  disable
  v-model="model"
  :min="min"
  :max="max"
/>

Vue Properties

Supports v-model which should be a Number.

Vue PropertyTypeDescription
sizeStringCSS String determining the width and height of the Knob. Examples: “120px”, “12rem”.
stepNumberNumber representing difference between two values that the model can take. Default: 1.
decimalsNumberNumber of decimals to represent the model with, if no placeholder / default slot is used.
minNumberMinimum value that the model can take.
maxNumberMaximum value that the model can take.
colorStringOne from Quasar Color Palette.
track-colorStringOne from Quasar Color Palette.
line-widthStringLine width of Knob. Default is ‘6px’.
readonlyBooleanSort of a “display” only mode. Model cannot be altered.
disableBooleanWhen set to true the model cannot be altered.

Vue Events

Vue EventDescription
@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

Lazy Input

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:

<!-- v0.15.11+ -->
<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>
Rating Uploader
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub