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.
Usage
You are responsible for accommodating the space around QSlider so that the label and marker labels won’t overlap the other content on your page. You can use CSS margin or padding for this purpose.
Standard
Vertical
With inner min/max v2.4+
Sometimes you need to restrict the model value to an interval inside of the track’s length. For this purpose, use inner-min and inner-max props. First prop needs to be higher or equal to min prop while the latter needs to be lower or equal to the max prop.
With step
The step property can also be floating point number (or numeric 0 if you need infinite precision).
With label
In the example below, move the slider to see the label.
The example below is better highlighting how QSlider handles label positioning so that it always stays inside the QSlider’s box horizontally.
Markers
Marker labels v2.4+
In order to use the marker label slots (see below), you must enable them by using the marker-labels prop.
Other customizations v2.4+
Lazy input
Null value
Reverse
Force dark mode
Readonly and disable
With QItem
Native form submit
When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QSlider, otherwise formData will not contain it (if it should):
Accessibility v2.25+
QSlider implements the WAI-ARIA slider pattern: the element that receives keyboard focus exposes role="slider" with aria-valuemin/aria-valuemax/aria-valuenow tracking the model (a null model reports the minimum, where its thumb sits, since the role requires a value — and aria-valuetext then says “No value” so it is not announced as a real selection), aria-orientation for the vertical mode, and aria-disabled / aria-readonly when applicable. A label-value (e.g. “50%”) also becomes aria-valuetext, so screen readers announce the same formatted value sighted users see.
The slider is keyboard-operable on every platform (a tablet with a keyboard attached included): the Arrow keys step the value (the direction follows RTL, reverse and vertical), PageUp / PageDown jump by 10 steps and Home / End go straight to the limits.
There is no built-in accessible name, so a QSlider is announced without a label by default. Pass an aria-label attribute — attributes fall through onto the focusable role="slider" element (only class/style stay on the wrapping element) — or associate a visible label yourself so screen reader users know what the value controls.