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



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.

With label



Snaps to steps



Markers



Always display label



Custom label value



Dark



Lazy input



Readonly



Disable



Null value



Using with a list



QSlider API