Slider

Range slider with optional ticks, value display, and custom formatter. Uses a native range input for full accessibility.

import { Slider } from 'phoundry-ui';

Basic

Show code

<Slider value={val} onchange={(v) => val = v} min={0} max={100} />

With showValue

Show code

<Slider value={val} onchange={(v) => val = v} min={0} max={100} showValue />

Value label on the left

10px

Show code

<Slider value={val} onchange={(v) => val = v} ticks={fontTicks} showValue valuePosition="start" />

With ticks

14px

Show code

const fontTicks: SliderTick[] = [
  { value: 10, label: '10px' },
  { value: 12, label: '12px' },
  { value: 14, label: '14px' },
  { value: 16, label: '16px' },
  { value: 18, label: '18px' },
  { value: 20, label: '20px' },
];

<Slider value={val} onchange={(v) => val = v} ticks={fontTicks} showValue />

Disabled

Show code

<Slider value={v} onchange={set} disabled />

Custom formatter

50%

Show code

<Slider
  value={opacity}
  onchange={(v) => opacity = v}
  min={0} max={1} step={0.01}
  showValue
  valueFormatter={(v) => `${Math.round(v * 100)}%`}
/>

Props

Prop	Type	Default	Description
value required	number	—	Current slider value
onchange required	(value: number) => void	—	Called with the new value on input
min	number	0	Minimum value (ignored when ticks are provided)
max	number	100	Maximum value (ignored when ticks are provided)
step	number	1	Step increment (ignored when ticks are provided)
ticks	SliderTick[]	—	Predefined snap points with labels
size	'sm' \| 'md'	'sm'	Track height
showValue	boolean	false	Display current value next to the slider
valuePosition	'start' \| 'end'	'end'	Which side of the track shows the value label when showValue is true
valueFormatter	(v: number) => string	—	Custom display formatter (ignored when ticks are provided)
disabled	boolean	false	Prevents interaction
class	string	—	Additional CSS classes
id	string	—	Element id
name	string	—	Form field name
element	HTMLInputElement	—	Bindable reference to the range input
…rest	HTMLAttributes<input>	—	Forwarded to the native range input (e.g. `aria-valuetext`).

Usage tips

When ticks are provided, the slider snaps to tick values and uses the tick label for display.
Use valueFormatter for custom units (percentages, currency, etc.) on continuous sliders.
Set a class with a fixed width (e.g. w-64) to control slider length.