Slider

A fully accessible single-thumb slider component for selecting a numeric value within a range.
WAI-ARIA compliant and supports mouse, touch, and keyboard interactions.

---

Usage

Basic usage (controlled)

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

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

<Slider min={0} max={100} step={1} value={value} onChange={setValue} />;

Uncontrolled usage

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

---

Variants

This component does not have visual variants. Styling is theme-driven via CSS variables and can be customized using className.

---

Sizes

The Slider has a single default size:

• Track height: 4px
• Thumb size: 16px

You can scale it via CSS if needed:

<Slider className="my-large-slider" />

---

States

Disabled

<Slider disabled />

Behavior:

• Pointer and keyboard interactions are disabled.
• Thumb is removed from tab order.
• Visual opacity is reduced.

---

Native Props / Composition

The Slider forwards interaction handlers through its internal structure and supports composition via className.

<Slider className="custom-slider" onChange={(value) => console.log(value)} />

---

Props

Prop	Type	Default	Description
min	number	0	Minimum allowed value
max	number	100	Maximum allowed value
step	number	1	Step interval for value changes
value	number	—	Controlled value
defaultValue	number	min	Initial value for uncontrolled usage
onChange	(value: number) => void	—	Called whenever the value changes
disabled	boolean	false	Disables interaction
className	string	""	Additional class names

---

Behavior Notes

• Supports controlled and uncontrolled usage.

• Values are:

  • Clamped between min and max.
  • Snapped to the nearest step.

• Dragging uses global listeners to ensure smooth interaction even when the pointer leaves the track.

• Keyboard interaction updates value without triggering pointer events.

---

Accessibility

• Uses role="slider" on the thumb element.

• Keyboard support:

  • ArrowLeft / ArrowDown → decrease by step
  • ArrowRight / ArrowUp → increase by step
  • PageUp / PageDown → ±10× step
  • Home → min
  • End → max

• ARIA attributes:

  • aria-valuemin
  • aria-valuemax
  • aria-valuenow
  • aria-disabled

• Focus-visible styles are enabled for keyboard users.

• Respects prefers-reduced-motion.

---

Layout

• Block-level component.
• Fills the width of its container by default.

<div style={{ width: 300 }}>
  <Slider />
</div>

---

Best Practices

Do

• Use controlled mode when the value affects other UI.
• Provide visible feedback of the current value.
• Keep step values reasonable for keyboard users.

Don’t

• Use for non-numeric input.
• Nest inside containers that block pointer events.
• Hide the slider value when precision matters.