Slider

When to use

• Volume, brightness, zoom
• Values where the rough position matters more than the exact number

Not for a range from–to, such as a price filter — use a RangeSlider.

Not when the exact value matters — use an Input with type="number".

Choosing between choosing one option or a value:

Component	Use it for	For example
RadioGroup	Up to about five options, all visible at once, as a form value	Shipping speed, plan size
Select	One option from a longer list, in little space, with the system picker	Country, time zone, sort order in a form
Combobox	A long list people search by typing, several picks, or options loaded from a server	Assign reviewers, search a city, add tags
ToggleGroup	A few options shown as buttons that apply at once, not a form field	Text alignment, list or grid view
Slider	A number in a range, where dragging is easier than typing an exact value	Volume, brightness
RangeSlider	A from–to range on one track	Price filter, salary band

Volume

40

Disabled

import { useState } from 'react';
import { Slider } from '@arun-dev/ui';

const field = { display: 'grid', gap: 'var(--space-3xs)', maxInlineSize: '20rem' };

export default function SliderBasics() {
  const [volume, setVolume] = useState(40);
  return (
    <div style={{ display: 'grid', gap: 'var(--space-md)' }}>
      <div style={field}>
        <label htmlFor="slider-volume">
          Volume <output htmlFor="slider-volume">{volume}</output>
        </label>
        <Slider
          id="slider-volume"
          name="volume"
          min={0}
          max={100}
          step={5}
          value={volume}
          onChange={(event) => setVolume(Number(event.target.value))}
        />
      </div>
      <div style={field}>
        <label htmlFor="slider-disabled">Disabled</label>
        <Slider id="slider-disabled" defaultValue={60} disabled />
      </div>
    </div>
  );
}

Slider is a native <input type="range">. The arrow keys, Page Up and Down, Home and End, step, the form value and form.reset() are all the browser’s, and react-hook-form’s register() binds it.

The browser draws it, in the brand’s accent colour (accent-color), with the track filled up to the thumb. Show the value yourself if it matters, such as with an <output> beside the label.

Props

Slider props

Prop	Type	Default	Description
min	number	0	The bottom of the range.
max	number	100	The top of the range.
step	number | 'any'	1	The increment the keys and the thumb move by.
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.

Notes

• One thumb only. For a range from–to, use a RangeSlider.
• The track and thumb shape are the browser’s. Only the colour is themed, through --slider-accent-color.