Slider

The QSlider is a great way for the user to specify a number value between a minimum and maximum value, with optional steps between valid values. The slider also has a focus indicator (highlighted slider button), which allows for keyboard adjustments of the slider.

Also check its “sibling”, the QRange component.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QSlider'
    ]
  }
}

Usage

Standard

Standard



With step

With step



The step property can also be floating point number (or numeric 0 if you need infinite precision).

Floating point



In the example below, move the slider to see the label.

Snap to steps



With label

With label



Always display label



Custom label value



Markers

Markers



Lazy input

Lazy input



Null value

Null value



Reverse

v1.5.0+
In reverse



Dark, readonly, disable

Dark



Readonly



Disable



With QItem

With QItem



QSlider API