Forms
Slider
Touch-first range control: the thumb grows while dragging, a bubble shows the value, each step ticks.
Slider
import { Slider } from '@anomalia/ui'; Notes
- Custom rather than a styled
<input type="range">, because the thumb growth, the value bubble and per-step haptics are not reachable natively. - Full keyboard support: arrows, PageUp/PageDown, Home/End.
Examples
Basics
Drag it: the thumb grows, a bubble appears above the finger, and every step crossed fires a haptic tick. Arrows, PageUp/Down and Home/End all work.
Daily budget
Posts per week
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Bindable value. |
min / max / step | number | 0 / 100 / 1 | Range and granularity. |
format | (value) => string | — | Formats the bubble and `aria-valuetext`. |
ticks | boolean | false | Step marks (ignored above 24 steps). |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.