Slider

A single- or multi-thumb (range) slider.

Volume

<div
  data-controller="zag-slider"
  data-part="root"
  data-zag-slider-value-value="[40]"
  class="w-40 space-y-2"
>
  <label data-part="label" class="text-sm font-medium">Volume</label>
  <div data-part="control" class="relative flex items-center py-2">
    <div data-part="track" class="bg-muted h-1.5 w-full rounded-full">
      <div data-part="range" class="bg-primary h-full rounded-full"></div>
    </div>
    <div
      data-part="thumb"
      class="bg-popover ring-ring focus-visible:ring-ring h-4 w-4 rounded-full shadow ring-1 focus:outline-none focus-visible:ring-2"
    >
      <input data-part="hidden-input" class="sr-only" />
    </div>
  </div>
</div>

For a range, render one thumb (each with its own hidden-input) per value; thumb order maps to value order.

Parts

root, label, control, track, range, thumb, hidden-input, value-text, marker-group, marker.

Values

Attribute	Type	Default	Description
data-zag-slider-value-value	Array	[0]	Thumb value(s) (JSON).
data-zag-slider-min-value	Number	0	Minimum value.
data-zag-slider-max-value	Number	100	Maximum value.
data-zag-slider-step-value	Number	1	Step increment.
data-zag-slider-orientation-value	String	"horizontal"	"horizontal" or "vertical".
data-zag-slider-name-value	String	""	name for form submission.
data-zag-slider-disabled-value	Boolean	false	Disable the slider.
data-zag-slider-read-only-value	Boolean	false	Read-only.

Events

Emits zag-slider:change ({ value: number[] }) while dragging and zag-slider:change-end when dragging stops.

Programmatic control

value (getter), setValue(number[]).