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

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

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

QSlider API

Loading API...
Please wait...