Slider

A composable, accessible Slider component for modern React applications.

import { Slider } from '@nofinite/nui';

Interactive Preview

An interactive input control that allows users to select a numeric value within a defined range using pointer dragging, track clicking, or keyboard navigation. Supports controlled and uncontrolled usage, step snapping, and full accessibility semantics.

Usage

Basic usage

import { Slider } from '@nofinite/nui';

<Slider />;

Controlled slider

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

<Slider value={value} onChange={setValue} />;

Custom range and step

<Slider min={0} max={10} step={0.5} defaultValue={5} />

Disabled slider

<Slider disabled defaultValue={40} />

Variants

Range configuration

<Slider min={0} max={100} />
<Slider min={0} max={10} step={0.1} />

Controlled vs uncontrolled

<Slider defaultValue={20} />
<Slider value={value} onChange={setValue} />

Disabled

<Slider disabled />

Available variants

• Default range
• Custom range
• Controlled
• Uncontrolled
• Disabled

Guidelines

• Use controlled mode when value must sync with external state
• Use uncontrolled mode for simple forms
• Prefer smaller step values for precision inputs
• Avoid extremely small steps causing excessive updates

States

• Idle
• Hover thumb
• Dragging
• Focus-visible
• Keyboard interaction
• Disabled
• Reduced motion

Keyboard Interaction

Accessibility

• Uses role="slider"
• Provides aria-valuemin, aria-valuemax, aria-valuenow
• Keyboard operable with full navigation semantics
• Focus is programmatically applied on pointer interaction
• Disabled state exposed via aria-disabled
• Respects prefers-reduced-motion
• Large invisible hit target improves touch usability

Best Practices

Do

• Match slider range with meaningful domain values
• Use stepping for predictable snapping behavior
• Provide visible labels or value indicators in forms
• Use controlled mode when slider drives UI changes
• Ensure adequate width for precise interaction

Don’t

• Use extremely small step sizes for long ranges
• Hide numeric meaning of slider value
• Rely solely on slider for critical precision input
• Disable keyboard navigation
• Use sliders for binary choices (prefer toggle)

API Reference