Slider

Slider is a component to provide input with a drag handle.

Props

Prop	Type	Default	Description
modelValue	number or Array	0	The current value of the slider. Use a number for single value, or an array [start, end] for range mode.
range	boolean	false	Enables range selection with two handles when set to true.
min	number	0	Minimum value allowed for the slider.
max	number	100	Maximum value allowed for the slider.
step	number	1	Step interval between values.

Prop Details

• modelValue
  Binds the current value of the slider.

  • Single value: v-model="value"
  • Range: v-model="value" where value is an array [start, end].

• range
  Enables dual-handle mode for selecting a range.

  • Example: <Slider v-model="value" range />

• min
  Sets the minimum selectable value.

  • Example: <Slider v-model="value" :min="10" />

• max
  Sets the maximum selectable value.

  • Example: <Slider v-model="value" :max="90" />

• step
  Sets the increment between selectable values.

  • Example: <Slider v-model="value" :step="5" />

Example Usage

<!-- Single value slider -->
<Slider v-model="singleValue" :min="0" :max="100" :step="1" />

<!-- Range slider with indicators -->
<Slider v-model="rangeValue" range :min="0" :max="100" :step="5" />

Range Slider with Value Indicators

You can display the current percentage values directly below each slider handle by absolutely positioning indicators.
This is useful for visually showing the selected range in real time.

20% 80%