Slider     

Quasar Slider is a great way to make the user specify a number value between a minimum and maximum value, with optional steps between valid values.

Also check its “sibling”, the Range component.
Remember you can use QSlider wrapped by a QField too.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Basic Usage

<q-slider v-model="selectedValue" :min="1" :max="7" />

Example with step, label and snap:

<q-slider
  v-model="selectedValue"
  :min="0"
  :max="10"
  :step="2"
  label
  snap
/>

Example with square slider button:

<q-slider
  v-model="selectedValue"
  :min="0"
  :max="10"
  square
/>

Vue Properties

Supports v-model which should be binded to a Number in your scope.

IMPORTANT
Make sure you choose the min, max and step value correctly. step must be a divisor of max - min, otherwise the component won’t work right. This is because all valid steps must be able to hold an equal position within the min and max values.

Error State

Use the error prop to indicate there is an error. This will turn the component red:

<q-slider error v-model="selectedValue" :min="0" :max="50" />

Disabled

Use the disable prop to stop the user from changing the slider value.

<q-slider v-model="selectedValue" :min="0" :max="50" disable />

Overriding Label

In the example below we add a “px” suffix to the label.

<q-slider
  v-model="label"
  label-always
  :min="-20" :max="20"
  :label-value="`${label}px`"
/>

Coloring

Use one of the Quasar colors from the Color Palette with the color prop, like primary, secondary, orange-8, teal-4:

<q-slider color="orange" v-model="standalone" :min="0" :max="50" label />

Vue Events

Usage Inside of a List

<q-list>
  <q-item>
    <q-item-side icon="volume_up" />
    <q-item-main>
      <q-slider v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="brightness_medium" />
    <q-item-main>
      <q-slider v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="mic" />
    <q-item-main>
      <q-slider v-model="standalone" :min="0" :max="50" label />
    </q-item-main>
  </q-item>
</q-list>