Range
A value on a scale where the exact number matters less than the feel, such as text size or a price band. Pass an array for two thumbs.
- Range
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Range
Scales the whole interface.
Dark theme, Range
Scales the whole interface.
High contrast theme, Range
Scales the whole interface.
UsageLink to the section Usage
import { Range } from '@skribly/ui/forms'<Range label="Text size" minValue={80} maxValue={160} step={10} defaultValue={100}
formatOptions={{ style: 'unit', unit: 'percent' }} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Arrow keys step, Page Up and Page Down jump, Home and End reach the ends.
- The value is printed above the track and announced with its unit.
- The 20px thumb has a 24px hit area; two-thumb ranges need thumbLabels.
This demo runs through axe in all three themes on every test run. See what the tests check.