rc-range-slider
Two-thumb range slider backed by native range inputs for min/max values, following the WAI-ARIA Multi-Thumb Slider pattern.
- Package
@rcarls/rc-range-slider- Element
<rc-range-slider>- Native dependency
- Requires two native range input children
- State model
- Controlled or uncontrolled numeric tuple
- Main events
rc-range-slider-inputrc-range-slider-change- Related
- Usage rulesTheme previews
Installation
- npm
- Yarn
- pnpm
npm install @rcarls/rc-webcomponents@next
yarn add @rcarls/rc-webcomponents@next
pnpm add @rcarls/rc-webcomponents@next
import '@rcarls/rc-webcomponents/rc-range-slider/define';
Usage
Wrap two native range inputs, the low value first. They stay in the page as the form values and the no-JavaScript fallback. Name the group and each input.
<rc-range-slider aria-label="Price range">
<input type="range" name="price-min" min="0" max="100" value="20" aria-label="Minimum" />
<input type="range" name="price-max" min="0" max="100" value="80" aria-label="Maximum" />
</rc-range-slider>
Live demo
Accessibility
After upgrade, two thumbs with role="slider" in a group replace the native inputs for
keyboard and assistive technology, while the hidden inputs keep their name and value for
form submission. Each thumb's aria-valuemin and aria-valuemax follow the other thumb, so the
low value cannot pass the high value. low-value-text and high-value-text set
aria-valuetext.
| Key | Action |
|---|---|
| Right Arrow, Up Arrow | Raises the focused thumb one step. |
| Left Arrow, Down Arrow | Lowers the focused thumb one step. |
| Page Up, Page Down | Raises or lowers the focused thumb ten steps. |
| Home, End | Moves the focused thumb to its lowest or highest position. |
Along the rendered track, the arrow that points toward higher values raises the thumb, so Left
and Right swap in right-to-left text. A readonly or disabled slider ignores these keys. See the
WAI-ARIA multi-thumb slider pattern.
Theming
The default demo mode shows the component without a package theme. Use the shared preview controls on this page to compare inherited, light, and dark color schemes or to apply the optional Material theme only inside the demo frames.
Localization
Built-in text follows the element's own lang, else <html lang>. Override it with
messages, or register it for every instance under rc-range-slider: low, high. See
Localization.
API
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
min | min | number | 0 | Minimum slider value. |
max | max | number | 100 | Maximum slider value. |
step | step | number | 1 | Slider step. |
value | JS property only | [number, number] | Not specified | Current [low, high] value. Assign a new tuple reference to trigger a re-render. |
defaultValue | JS property only | [number, number] | undefined | Not specified | Initial uncontrolled [low, high] value. Has no effect after the first user interaction or `value` write. |
disabled | disabled | boolean | false | Disable both thumbs and their hidden native input reflectors. |
readonly | readonly | boolean | false | Prevents edits while preserving normal focus and display. |
messages | JS property only | Partial<RCRangeSliderMessages> | undefined | Not specified | Built-in text overrides; unset keys fall back to registered text, then English. |
lowLabel | low-label | string | undefined | Not specified | Accessible label for the low (min) thumb when the input does not provide one. Defaults to the `low` message. |
highLabel | high-label | string | undefined | Not specified | Accessible label for the high (max) thumb when the input does not provide one. Defaults to the `high` message. |
lowValueText | low-value-text | string | '' | Formatted screen-reader text for the low value. Falls back to the raw number. |
highValueText | high-value-text | string | '' | Formatted screen-reader text for the high value. Falls back to the raw number. |
display | display | DisplayValue | null | Controls the live value display. - Absent (default) — no value shown. - `display` or `display="float"` — floats each value above its thumb. - `display="inline-start"` — renders the value container before the track. - `display="inline-end"` — renders the value container after the track. |
orientation | orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation; reflected as an attribute and forwarded to custom thumbs. |
Events
| Event | Detail type | Description |
|---|---|---|
rc-range-slider-input | CustomEvent | Fires while either thumb moves. Detail: `{ value }`. |
rc-range-slider-change | CustomEvent | Fires when a thumb commits a new value. Detail: `{ value }`. |
Slots
| Name | Description |
|---|---|
(default) | Consumer-provided native range inputs. |
track-background | Optional decorative content rendered inside the track before the selected range fill. |
low-value-display | Optional replacement for the low value text. |
high-value-display | Optional replacement for the high value text. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--rc-range-slider-accent | Highlight | Accent color for selected range, thumb border, focus, hover, and active states. |
--rc-range-slider-gap | var(--rc-control-gap) | Gap between track and inline value display. |
--rc-range-slider-control-size | var(--rc-control-block-size) | Track hit-area block size. |
--rc-range-slider-vertical-size | 12.5rem | Track length when `orientation="vertical"`. |
--rc-range-slider-track-size | 0.1875rem | Visual track thickness. |
--rc-range-slider-track-background | color-mix(in srgb, CanvasText 25%, Canvas) | Unselected track color. |
--rc-range-slider-track-radius | var(--rc-control-radius) | Track border radius. |
--rc-range-slider-range-background | Not specified | Filled selected-range color. Defaults to `--rc-range-slider-accent` (`GrayText` when `disabled`). |
--rc-range-slider-thumb-background | ButtonFace | Thumb background color. |
--rc-range-slider-thumb-border | var(--rc-range-slider-accent) | Thumb border color. |
--rc-range-slider-thumb-size | 1.125rem | Visual thumb inline/block size. |
--rc-range-slider-thumb-hover-background | Not specified | Thumb background on hover. Defaults to `--rc-range-slider-accent` (`ButtonFace` when `disabled`). |
--rc-range-slider-thumb-hover-border | Not specified | Thumb border color on hover. Defaults to `--rc-range-slider-accent` (`GrayText` when `disabled`). |
--rc-range-slider-thumb-active-background | Not specified | Thumb background while pressed. Defaults to `--rc-range-slider-accent` (`ButtonFace` when `disabled`). |
--rc-range-slider-thumb-active-border | Not specified | Thumb border color while pressed. Defaults to `--rc-range-slider-accent` (`GrayText` when `disabled`). |
--rc-range-slider-focus-outline | Not specified | Thumb focus ring color. Defaults to `--rc-range-slider-accent` (`GrayText` when `disabled`). |
--rc-range-slider-value-color | var(--rc-text-disabled) | Value display text color. |
--rc-thumb-radius | 9px | Half the thumb width; used to align float value displays and range fill. |
--rc-range-slider-float-value-block-offset | -1.4em | Block-axis offset for horizontal float value displays. |
--rc-range-slider-float-value-inline-offset | calc(100% + 0.5rem) | Inline-axis offset for vertical float value displays. |
CSS Parts
| Part | Description |
|---|---|
root | Root layout wrapper. |
group | Slider group wrapper. |
track | Visual slider track. |
range | Filled selected range segment. |
thumb | Shared custom slider thumb. |
low-thumb | Low-value custom slider thumb. |
high-thumb | High-value custom slider thumb. |
value-display | Shared rendered value text. |
low-value-display | Rendered low value text. |
high-value-display | Rendered high value text. |