rc-slider
Single-thumb slider backed by a native <input type="range"> with custom track and value display hooks, following the WAI-ARIA Slider pattern.
- Package
@rcarls/rc-slider- Element
<rc-slider>- Native dependency
- Requires a native range input child
- State model
- Controlled or uncontrolled numeric value
- Main events
rc-slider-inputrc-slider-change- Related
- Theme previews
Installation
- npm
- Yarn
npm install @rcarls/rc-slider
yarn add @rcarls/rc-slider
import '@rcarls/rc-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 | value | number | Not specified | Current slider value. |
defaultValue | default-value | number | undefined | Not specified | Initial uncontrolled slider value. Has no effect after the first user interaction or `value` write. |
disabled | disabled | boolean | false | Disable the underlying input. |
readonly | readonly | boolean | false | Prevents edits while preserving normal display. Not a native range attribute. |
display | display | DisplayValue | null | Controls the live value display. - Absent (default) — no value shown. - `display` or `display="float"` — floats above the thumb. - `display="inline-start"` — rendered before the track, inline in the grid. - `display="inline-end"` — rendered after the track, inline in the grid. |
valueText | value-text | string | "" | Screen-reader value text. When set, forwarded as `aria-valuetext` on the native input. |
orientation | orientation | "horizontal" | "vertical" | "horizontal" | Orientation; reflected as an attribute and forwarded to `aria-orientation`. |
Methods
No public methods are documented in the custom elements manifest.
Events
| Event | Detail type | Description |
|---|---|---|
type | CustomEvent | No description provided. |
rc-slider-input | No detail type documented | Fires continuously while the value changes. Detail: `{ value }`. |
rc-slider-change | No detail type documented | Fires when the committed value changes (on release). Detail: `{ value }`. |
Slots
| Name | Description |
|---|---|
track-background | Optional decorative content rendered inside the track before the progress fill. |
value-display | Optional replacement for the rendered value text. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--rc-thumb-radius | 9px | Half the thumb width; used to position the float value display. |
--rc-slider-gap | var(--rc-control-gap) | Gap between track and inline value display. |
--rc-slider-control-size | var(--rc-control-block-size) | Track hit-area block size. |
--rc-slider-track-size | 0.1875rem | Visual track thickness. |
--rc-slider-track-background | CanvasText | Unfilled track color. |
--rc-slider-track-opacity | 0.25 | Unfilled track opacity. |
--rc-slider-track-radius | var(--rc-control-radius) | Track border radius. |
--rc-slider-progress-background | var(--rc-accent) | Filled track color. |
--rc-slider-value-color | var(--rc-text-disabled) | Value display text color. |
--rc-slider-float-value-block-offset | -1.4em | Block-axis offset for horizontal float value display. |
--rc-slider-float-value-inline-offset | calc(100% + 0.5rem) | Inline-axis offset for vertical float value display. |
CSS Parts
| Part | Description |
|---|---|
root | Root layout wrapper. |
control | Track/input positioning wrapper. |
track | Visual slider track. |
progress | Filled progress segment. |
value-display | Rendered value text. |