Components · Form
Slider
A styled native range input with a filled track that tracks value via a CSS custom property, an optional numeric readout, and a dedicated disabled-state action colour for the thumb.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
Variants & states
- min / max / step
- showValue readout
- disabled
Tokens used
--semantic-color-action-primary--semantic-color-surface-input--semantic-color-border-default--semantic-color-action-primary-disabled
Copy-paste
import { Slider } from 'operator-components';
<Slider label="Zoom level" min={1} max={10} step={1} showValue defaultValue={4} />Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)