Slider

An easily stylable range input. Pass an array to defaultValue and one thumb per value for a range. The track uses the color wash, the indicator uses the accent, and the thumb stays light. Hover and focus shift the thumb. Label and value are Regular.

Anatomy

<UiSliderRoot :default-value="25">
  <UiSliderLabel>Volume</UiSliderLabel>
  <UiSliderValue />
  <UiSliderControl>
    <UiSliderTrack>
      <UiSliderIndicator />
      <UiSliderThumb aria-label="Volume" />
    </UiSliderTrack>
  </UiSliderControl>
</UiSliderRoot>

Parts

• Root — value / defaultValue as a number or number array. min 0, max 100, step 1.
• Label / Value — optional name and formatted reading.
• Control / Track — pointer drag. Clicking the track moves the nearest thumb.
• Indicator — fills from min (or the first thumb) to the last thumb. Width is CSS.
• Thumb — role="slider". Arrows step, Home / End, PageUp / PageDown.

Give each thumb an accessible name with aria-label or UiSliderLabel.