Why donate
API Explorer
Range

The QRange component is a great way to offer the user the selection of a sub-range of values between a minimum and maximum value, with optional steps to select those values. An example use case for the Range component would be to offer a price range selection.

Also check out its “sibling”, the QSlider component.

Loading QRange API...

Usage

Notice we are using an object for the selection, which holds values for both the lower value of the selected range - rangeValues.min and the higher value - rangeValues.max.

Standard

WARNING

You are responsible for accommodating the space around QRange 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

Vertical orientation



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.

Inner min/max



With step

With Step



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

Floating point



Snaps to steps



With label

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

With label



Always display label



Custom label values



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

Long label



Markers

Markers



Marker labels
v2.4+

Marker labels



TIP on slots

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

Marker label slots



Other customizations
v2.4+

Color customizations



Hide selection bar



Custom track images



Track & thumb size



Dragging range

Use the drag-range or drag-only-range props to allow the user to move the selected range or only a predetermined range as a whole.

Drag range



Drag range + snap to step



Drag only range (fixed interval)



Lazy input

Lazy input



Null values

Null values



Reverse

In reverse



Force dark mode

Force dark mode



Readonly and disable

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 QRange, otherwise formData will not contain it (if it should):

Native form