Quasar Range is a great way to make the user specify a Number value between an interval, with optional steps between valid values.

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

Basic Usage

<q-range v-model="number" :min="1" :max="7"></q-range>

Error State

Add has-error CSS class:

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

Vue Properties

Vue PropertyTypeDescription
minNumberMinimum value of the model
maxNumberMaximum value of the model
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.
disableBooleanWhen true user cannot change model value.

Example with step, label and snap:


Make sure you choose the min, max and step value correctly. step must be a divisor of max - 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.

Vue Events

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


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

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

Inside of a List Usage

<div class="list">
<div class="item two-lines">
<i class="item-primary">volume_up</i>
<div class="item-content">