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.

Installation

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QRange'
    ]
  }
}

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

Standard

With step

With Step

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

Floating point

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

Snaps to steps

With 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

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

Dark, readonly, disable

Dark
Readonly
Disable

With QItem

With QItem

Getting creative

Using simple CSS you can get nice effects.

Getting creative

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

QRange API