Slider

A range input that lets users select a numeric value within a defined min/max range.

Import

tsx

import { Slider } from '@tac-ui/web';

Playground

Interactively configure the Slider props below.

Disabled

tsx

<Slider defaultValue={50} min={0} max={100} />

Default

The base slider renders a styled range input with a filled track and an animated thumb that scales on hover and drag interactions.

tsx

<Slider defaultValue={50} min={0} max={100} />

Unfilled

Set filled={false} to render the track as a flat secondary color without the progressive fill, useful when the position alone conveys the value.

tsx

<Slider defaultValue={50} min={0} max={100} filled={false} />

With Label and Value Display

Pass label to render a heading above the track. Enable showValue to display the current numeric value aligned to the right of the label in real time.

Volume40

tsx

const [value, setValue] = useState(40);

<Slider
  label="Volume"
  showValue
  value={value}
  min={0}
  max={100}
  step={1}
  onChange={(e) => setValue(Number(e.target.value))}
/>

API Reference

Prop	Type	Default	Description
label	string	-	Label displayed above the slider.
showValue	boolean	false	Displays the current value next to the label.
filled	boolean	true	Fills the track up to the current value with the primary color.
value	number	-	Controlled current value.
defaultValue	number	-	Default value for uncontrolled usage.
min	number	0	Minimum value of the range.
max	number	100	Maximum value of the range.
step	number	1	Increment step between values.
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	-	Called when the value changes.
disabled	boolean	false	Disables the slider when true.