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

Loading API...
Please wait...

Usage

Standard

Standard



Vertical

Vertical orientation



With step

With step



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

Floating point



Snap to steps



With label

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

With label



Always display label



Custom label value



The example below is better highlighting how QSlider handles label positioning so that it always stays inside the QSlider’s box horizontally.

Long label



Markers

Markers



Lazy input

Lazy input



Null value

Null value



Reverse

In reverse



Dark, readonly, disable

Dark



Readonly



Disable



With QItem

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

Native form