Upgrade toQuasar v2and use Vue.js 3
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.

QSlider API

Usage

WARNING

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
v1.17+

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
v1.17+




TIP on slots

In order to use the marker label slots (see below), you must enable them by using the marker-labels prop.




Other customizations
v1.17+













Lazy input




Null value




Reverse
v1.5+




Dark, readonly, disable










With QItem




Native form submit
v1.9+

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):