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



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



Dark, readonly, disable

Dark



Readonly



Disable



With QItem

With QItem



QRange API