Double Range     

Quasar Double Range is a great way to make the user specify an interval, with optional steps between valid values. Some example: select a price range.

Also check its “sibling”, the simple Range component.

Basic Usage

Notice we are using two models, one for the beginning of the interval and one for the end of it.

<q-double-range
v-model="model"
:min="1"
:max="7"
></q-double-range>
<!--
"model" is an Object of this form:
{min: 0, max: 100}
-->

Error State

Add has-error CSS class:

<q-double-range
class="has-error"
v-model="model"
:min="1"
:max="7"
></q-double-range>

Vue Properties

Vue PropertyTypeDescription
minNumberMinimum value for beginning of interval
maxNumberMaximum value for end of interval
labelBooleanPopup a label when user clicks/taps on the Range
labelAlwaysBooleanAlways display the label
stepNumberSpecify step amount between valid values
snapBooleanRange handler will snap on values, rather than walking freely; good to use along step; also displays step markers on the Range
markersBooleanDisplay markers on background, one for each possible value for the model.
drag-rangeBooleanUser can also drag the range (while maintaining interval).
disable-minBooleanUser won’t be able to change the minimum value.
disable-maxBooleanUser won’t be able to change the maximum value.
disableBooleanWhen true user cannot change interval.

IMPORTANT
Make sure you choose the min, max and step value correctly. step must be a divisor of max - min, of modelMin - min and of modelMax - min otherwise it might mess things up. This is because all valid steps must be able to hold an equal position within the min-max interval.

Example with step, label and snap:

<q-double-range
v-model="model"
:min="min"
:max="max"
:step="step"
label
snap
></q-double-range>
<!--
"model" is an Object of this form:
{min: 0, max: 100}
-->

Vue Events

Vue EventDescription
@inputTriggered on model value change with the new value.

Coloring

Use one of the Quasar colors from the Color Palette, like primary, secondary, orange, teal as CSS class:

<q-double-range
class="orange"
v-model="model"
></q-double-range>

Inside of a List Usage

<div class="list">
<div class="item two-lines">
<i class="item-primary">local_atm</i>
<div class="item-content">
<q-double-range
v-model="model"
:min="0" :max="50" label
></q-double-range>
</div>
</div>
</div>