@tordek/rc-slider NPM

rc-slider

Slider UI component for React

Forked off rc-slider to add support for passing classNames to parts of the slider.

Install

Example

npm start and then go to http://localhost:8000

Online examples: https://slider.react-component.now.sh/

Usage

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

export default () => (
  <>
    <Slider />
    <Slider range />
  </>
);

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

API

createSliderWithTooltip(Slider | Range) => React.Component

An extension to make Slider or Range support Tooltip on handle.

const Slider = require('@tordek/rc-slider');
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

Online demo

After Range or Slider was wrapped by createSliderWithTooltip, it will have the following props:

Name	Type	Default	Description
tipFormatter	(value: number): React.ReactNode	`value => value`	A function to format tooltip's overlay
tipProps	Object	`{` `placement: 'top',` `prefixCls: 'rc-slider-tooltip',` `overlay: tipFormatter(value)` `}`	A function to format tooltip's overlay

Common API

The following APIs are shared by Slider and Range.

Name	Type	Default	Description
className	string	`''`	Additional CSS class for the root DOM node
min	number	`0`	The minimum value of the slider
max	number	`100`	The maximum value of the slider
marks	`{number: ReactNode}` or`{number: { style, label }}`	`{}`	Marks on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains `style` and `label` properties.
step	number or `null`	`1`	Value to be added or subtracted on each step the slider makes. Must be greater than zero, and `max` - `min` should be evenly divisible by the step value. When `marks` is not an empty object, `step` can be set to `null`, to make `marks` as steps.
vertical	boolean	`false`	If vertical is `true`, the slider will be vertical.
handle	(props) => React.ReactNode		A handle generator which could be used to customized handle.
included	boolean	`true`	If the value is `true`, it means a continuous value interval, otherwise, it is a independent value.
reverse	boolean	`false`	If the value is `true`, it means the component is rendered reverse.
disabled	boolean	`false`	If `true`, handles can't be moved.
dots	boolean	`false`	When the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider with dots.
onChange	Function	NOOP	`onChange` will be triggered while the value of Slider changing.
*ClassName	string \| string[]	varies	HTML `class` property for different elements in the slider

Slider

Name	Type	Default	Description
defaultValue	number	`0`	Set initial value of slider.
value	number	-	Set current value of slider.
startPoint	number	`undefined`	Track starts from this value. If `undefined`, `min` is used.
tabIndex	number	`0`	Set the tabIndex of the slider handle.
ariaLabelForHandle	string	-	Set the `aria-label` attribute on the slider handle.
ariaLabelledByForHandle	string	-	Set the `aria-labelledby` attribute on the slider handle.
ariaValueTextFormatterForHandle	(value) => string	-	A function to set the `aria-valuetext` attribute on the slider handle. It receives the current value of the slider and returns a formatted string describing the value. See WAI-ARIA Authoring Practices 1.1 for more information.

Range

Name	Type	Default	Description
defaultValue	`number[]`	`[0, 0]`	Set initial positions of handles.
value	`number[]`		Set current positions of handles.
tabIndex	number[]	`[0, 0]`	Set the tabIndex of each handle.
ariaLabelGroupForHandles	Arraystring	-	Set the `aria-label` attribute on each handle.
ariaLabelledByGroupForHandles	Arraystring	-	Set the `aria-labelledby` attribute on each handle.
ariaValueTextFormatterGroupForHandles	Array(value) => string	-	A function to set the `aria-valuetext` attribute on each handle. It receives the current value of the slider and returns a formatted string describing the value. See WAI-ARIA Authoring Practices 1.1 for more information.
count	number	`1`	Determine how many ranges to render, and multiple handles will be rendered (number + 1).
allowCross	boolean	`true`	`allowCross` could be set as `true` to allow those handles to cross.
pushable	boolean or number	`false`	`pushable` could be set as `true` to allow pushing of surrounding handles when moving a handle. When set to a number, the number will be the minimum ensured distance between handles. Example:
draggableTrack	boolean	`false`	Open the track drag. open after click on the track will be invalid.