Slider

A professional slider component with smooth drag interaction, keyboard navigation, and modifier key support. Designed for precise value control in editor workflows.

Live Preview

Import

import { Slider } from 'entangle-ui';

Usage

const [opacity, setOpacity] = useState(100);

<Slider value={opacity} onChange={setOpacity} min={0} max={100} />;

With Label and Unit

<Slider
  value={rotation}
  onChange={setRotation}
  min={0}
  max={360}
  step={1}
  unit="°"
  label="Rotation"
/>

Sizes

<Slider size="sm" value={50} onChange={setValue} label="Small" />
<Slider size="md" value={50} onChange={setValue} label="Medium" />
<Slider size="lg" value={50} onChange={setValue} label="Large" />

Precision Control with Modifier Keys

Hold modifier keys while dragging or using arrow keys for different step sizes:

Modifier	Behavior	Default Step
None	Normal	step (1)
Shift	Fine	step / 10
Ctrl/Cmd	Coarse	step * 10

<Slider
  value={scale}
  onChange={setScale}
  min={0.1}
  max={5}
  step={0.1}
  precisionStep={0.01}
  largeStep={1}
  precision={2}
  label="Scale"
/>

Tick Marks

<Slider
  value={angle}
  onChange={setAngle}
  min={0}
  max={360}
  step={15}
  showTicks
  tickCount={8}
  unit="°"
  label="Angle"
/>

Custom Value Formatting

<Slider
  value={volume}
  onChange={setVolume}
  min={0}
  max={100}
  formatValue={v => `${v}%`}
  label="Volume"
/>

Form Integration

<Slider
  value={brightness}
  onChange={setBrightness}
  min={0}
  max={100}
  label="Brightness"
  helperText="Adjust display brightness"
  required
/>

<Slider
  value={contrast}
  onChange={setContrast}
  min={0}
  max={200}
  label="Contrast"
  error={contrast > 150}
  errorMessage="High contrast may cause clipping"
/>

Keyboard Navigation

Key	Action
Arrow Right/Up	Increment by step
Arrow Left/Down	Decrement by step
Home	Jump to minimum
End	Jump to maximum
Page Up	Increment by large step
Page Down	Decrement by large step

Props

Prop	Type	Default	Description
value *	number	—	Current numeric value.
onChange *	(value: number) => void	—	Callback when value changes.
min	number	0	Minimum allowed value.
max	number	100	Maximum allowed value.
step	number	1	Step size for value increments.
precisionStep	number	step / 10	Step size when Shift is held (fine control).
largeStep	number	step * 10	Step size when Ctrl/Cmd is held (coarse control).
precision	number	2	Number of decimal places to round to.
size	'sm' | 'md' | 'lg'	'md'	Slider size variant.
disabled	boolean	false	Whether the slider is disabled.
readOnly	boolean	false	Whether the slider is read-only.
label	string	—	Label text displayed above the slider.
helperText	string	—	Helper text displayed below the slider.
error	boolean	false	Whether the slider has an error state.
errorMessage	string	—	Error message displayed when error is true.
required	boolean	false	Whether the slider is required.
unit	string	—	Unit suffix to display (e.g., "px", "%", "°").
formatValue	(value: number) => string	—	Custom value formatter for display.
showTooltip	boolean	true	Show value tooltip while dragging.
showTicks	boolean	false	Show tick marks along the track.
tickCount	number	5	Number of tick marks to show.
className	string	—	Additional CSS class names.
testId	string	—	Test identifier for automated testing.

Accessibility

• Uses role="slider" with proper ARIA attributes
• aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext
• Full keyboard navigation with arrow keys, Home, End, Page Up/Down
• Disabled and read-only states reflected via aria-disabled and aria-readonly