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.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
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 -
step property can also be a floating point number (or numeric
0 if you need infinite precision).
In the example below, move the slider to see the label.
The example below is better highlighting how QRange handles label positioning so that it always stays inside the QRange’s box horizontally.
drag-only-range props to allow the user to move the selected range or only a predetermined range as a whole.
Dark, readonly, disable
Using simple CSS you can get nice effects.
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 QRange, otherwise formData will not contain it (if it should):