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

Usage rulesTheme previews

Installation

npm

npm install @rcarls/rc-webcomponents@next

Yarn

yarn add @rcarls/rc-webcomponents@next

pnpm

pnpm add @rcarls/rc-webcomponents@next

import '@rcarls/rc-webcomponents/rc-slider/define';

Usage

Wrap a native <input type="range">. It stays in the page as the form value, the keyboard control, and the no-JavaScript fallback. Label it as any range input.

<label for="volume">Volume</label>
<rc-slider>
  <input id="volume" name="volume" type="range" min="0" max="100" value="40" />
</rc-slider>

Live demo

Accessibility

The native range input keeps its slider role and keyboard behavior. The component forwards value-text to aria-valuetext, orientation="vertical" to aria-orientation, and readonly to aria-readonly, and its track and value display are decorative.

Key	Action
Arrow keys	Native: moves the value one step.
Home, End	Native: moves to the minimum or maximum.
Page Up, Page Down	Moves the value ten steps up or down.

A readonly slider ignores Page Up and Page Down and restores its value after any other key or pointer change. See the WAI-ARIA 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.

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`.

Events

Event	Detail type	Description
rc-slider-input	CustomEvent	Fires continuously while the value changes. Detail: `{ value }`.
rc-slider-change	CustomEvent	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-vertical-size	12.5rem	Track length when `orientation="vertical"`.
--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.