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
- Theme previews
Installation
- npm
- Yarn
npm install @rcarls/rc-range-slider
yarn add @rcarls/rc-range-slider
import '@rcarls/rc-range-slider/define';
Live demo
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.
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. |
lowLabel | low-label | string | "Minimum" | Accessible label for the low (min) thumb when the input does not provide one. |
highLabel | high-label | string | "Maximum" | Accessible label for the high (max) thumb when the input does not provide one. |
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. |
Methods
No public methods are documented in the custom elements manifest.
Events
| Event | Detail type | Description |
|---|---|---|
type | CustomEvent | No description provided. |
rc-range-slider-input | No detail type documented | Fires while either thumb moves. Detail: `{ value }`. |
rc-range-slider-change | No detail type documented | 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-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-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-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. |