Slider

Single-value range slider with a live value readout. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiSlider } from '@ziyarago/ui/vue'

Default

Vue
<UiSlider
  label="Budget per night, USD"
  :min="50"
  :max="500"
  :step="10"
  v-model="value"
 />

Without value

Vue
<UiSlider label="Volume" :show-value="false" v-model="value" />

Sizes

Vue
<UiSlider
  size="xs"
  label="Budget, USD"
  :min="50"
  :max="500"
  :step="10"
  v-model="value"
 />

<UiSlider
  size="sm"
  label="Budget, USD"
  :min="50"
  :max="500"
  :step="10"
  v-model="value"
 />

<UiSlider
  size="md"
  label="Budget, USD"
  :min="50"
  :max="500"
  :step="10"
  v-model="value"
 />

<UiSlider
  size="lg"
  label="Budget, USD"
  :min="50"
  :max="500"
  :step="10"
  v-model="value"
 />

<UiSlider
  size="xl"
  label="Budget, USD"
  :min="50"
  :max="500"
  :step="10"
  v-model="value"
 />

API reference

Single-handle range slider with a value readout. Use for picking one number in a bounded range.

Props

PropType and valuesDefaultDescription
modelValuev-modelnumber—Current value. Defaults to min.
minnumber0Lowest value.
maxnumber100Highest value.
stepnumber1Step between values.
showValuebooleantrueShow the current value to the right of the track.
formatValue(value: number) => string—Formats the readout, e.g. v => v + " $".
labelstring—Label shown above the control.
hintstring—Helper text under the control. Hidden while error is set.
errorstring—Error message under the control. Turns the control red and is announced with role="alert".
sizexssmmdlgxl'md'Track and thumb size.

Events

Vue: @name. React: onName.

changeCalled with the new number while dragging.