RangeSlider

Two-handle slider for choosing a minimum and maximum. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiRangeSlider } from '@ziyarago/ui/vue'

Price range

Price per night120 – 360

Vue

<UiRangeSlider
  label="Price per night"
  :min="0"
  :max="600"
  :step="10"
  v-model="value"
 />

Distance

Distance to Haram, m0 – 800

Vue

<UiRangeSlider
  label="Distance to Haram, m"
  :min="0"
  :max="2000"
  :step="50"
  v-model="value"
 />

Sizes

Price per night120 – 360

Vue

<UiRangeSlider
  size="xs"
  label="Price per night"
  :min="0"
  :max="600"
  :step="10"
  v-model="value"
 />

<UiRangeSlider
  size="sm"
  label="Price per night"
  :min="0"
  :max="600"
  :step="10"
  v-model="value"
 />

<UiRangeSlider
  size="md"
  label="Price per night"
  :min="0"
  :max="600"
  :step="10"
  v-model="value"
 />

<UiRangeSlider
  size="lg"
  label="Price per night"
  :min="0"
  :max="600"
  :step="10"
  v-model="value"
 />

<UiRangeSlider
  size="xl"
  label="Price per night"
  :min="0"
  :max="600"
  :step="10"
  v-model="value"
 />

API reference

Two-handle slider for a min-max range. Use for price, duration or date-number filters.

Props

PropType and valuesDefaultDescription

modelValuev-model[number, number]—Tuple [from, to]. Defaults to [min, max].

minnumber0Lowest value.

maxnumber100Highest value.

stepnumber1Step between values.

formatValue(value: number) => string—Formats both ends in the readout.

labelstring—Label shown above the control.

sizexssmmdlgxl'md'Track and thumb size.

Events

Vue: @name. React: onName.

changeCalled with a new [from, to] tuple; the handles cannot cross.