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.
minNumberMinimum value that the model can take.
maxNumberMaximum value that the model can take.
colorStringOne from Quasar Color Palette.
trackColorStringOne from Quasar Color Palette.
lineWidthStringLine 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 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub