@rc-component/slider

_{Part of the Ant Design ecosystem.}

🎚️ Accessible React slider for single values, ranges, marks, and editable handles.

English | 简体中文

Highlights

• Supports single-value and range sliders with one shared component.
• Provides marks, dots, keyboard interaction, reverse and vertical layouts.
• Supports editable range handles and draggable tracks through range config.
• Exposes semantic classNames and styles slots for tracks, rail, and handles.

Install

npm install @rc-component/slider

Usage

import Slider from '@rc-component/slider';
import '@rc-component/slider/assets/index.css';

export default () => <Slider defaultValue={30} />;

import Slider from '@rc-component/slider';
import '@rc-component/slider/assets/index.css';

export default () => (
  <Slider
    range={{ draggableTrack: true }}
    marks={{ 0: '0', 50: '50', 100: '100' }}
    defaultValue={[20, 60]}
  />
);

Online preview: https://slider.react-component.vercel.app/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Slider

Name	Type	Default	Description
activeDotStyle	React.CSSProperties | (dotValue: number) => React.CSSProperties	-	Style for active dots.
activeHandleRender	HandlesProps['handleRender']	-	Render function for the active handle.
allowCross	boolean	true	Allow handles to cross in range mode.
ariaLabelForHandle	string | string[]	-	aria-label for handle elements.
ariaLabelledByForHandle	string | string[]	-	aria-labelledby for handle elements.
ariaRequired	boolean	-	aria-required for handle elements.
ariaValueTextFormatterForHandle	((value: number) => string) | ((value: number) => string)[]	-	Formatter for aria-valuetext.
autoFocus	boolean	-	Focus the slider on mount.
className	string	-	Additional class name.
classNames	Partial<Record<'tracks' | 'track' | 'rail' | 'handle', string>>	-	Semantic class names for internal slots.
count	number	-	Deprecated. Use range.minCount or range.maxCount.
defaultValue	number | number[]	-	Initial value.
disabled	boolean | boolean[]	false	Disable all handles or specific handles.
dots	boolean	false	Show dots at each valid step position.
dotStyle	React.CSSProperties | (dotValue: number) => React.CSSProperties	-	Style for dots.
handleRender	HandlesProps['handleRender']	-	Custom handle renderer.
handleStyle	React.CSSProperties | React.CSSProperties[]	-	Deprecated. Use styles.handle.
id	string	-	Root id.
included	boolean	true	Whether the track is rendered as a continuous selected interval.
keyboard	boolean	true	Enable keyboard interaction.
marks	Record<string | number, ReactNode | MarkObj>	-	Slider marks.
max	number	100	Maximum value.
min	number	0	Minimum value.
onAfterChange	(value) => void	-	Deprecated. Use onChangeComplete.
onBeforeChange	(value) => void	-	Deprecated. Use onChange.
onBlur	(event) => void	-	Blur handler.
onChange	(value) => void	-	Triggered while value changes.
onChangeComplete	(value) => void	-	Triggered when interaction completes.
onFocus	(event) => void	-	Focus handler.
prefixCls	string	'rc-slider'	Prefix class name.
pushable	boolean | number	false	Push adjacent handles in range mode.
railStyle	React.CSSProperties	-	Deprecated. Use styles.rail.
range	boolean | RangeConfig	false	Enable range mode or configure editable range behavior.
reverse	boolean	false	Render in reverse direction.
startPoint	number	min	Start point for a single-value track.
step	number | null	1	Step size. Use null to use marks as steps.
style	React.CSSProperties	-	Root style.
styles	Partial<Record<'tracks' | 'track' | 'rail' | 'handle', React.CSSProperties>>	-	Semantic styles for internal slots.
tabIndex	number | number[]	0	Handle tab index.
track	boolean	-	Whether to render track elements.
trackStyle	React.CSSProperties | React.CSSProperties[]	-	Deprecated. Use styles.track.
value	number | number[]	-	Controlled value.
vertical	boolean	false	Render vertically.

RangeConfig

Name	Type	Default	Description
draggableTrack	boolean	false	Allow dragging the selected range track.
editable	boolean	false	Allow adding or removing range handles.
maxCount	number	-	Maximum handle count when editable.
minCount	number	-	Minimum handle count when editable.

Ref

Name	Type	Description
blur	() => void	Blur the slider.
focus	() => void	Focus the slider.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/slider is released under the MIT license.