rc-slider

2020-01-15

rc-slider

Slider UI component for React

rc-slider


Slider UI component for React

NPM versionbuild statusTest coveragedavid-dm depsdavid-dm dev depsnode versionnpm download

Screenshots

Features

  • Supports IE9, IE9+, Chrome, Firefox & Safari

Install

npm install --save rc-slider

rc-slider

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Slider, { Range } from 'rc-slider';
// We can just import Slider or Range to reduce bundle size
// import Slider from 'rc-slider/lib/Slider';
// import Range from 'rc-slider/lib/Range';
import 'rc-slider/assets/index.css';

ReactDOM.render(
  <div>
    <Slider />
    <Range />
  </div>,
  container
);

API

createSliderWithTooltip(Slider | Range) => React.Component

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

const Slider = require('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:

NameTypeDefaultDescription
tipFormatter(value: number): React.ReactNodevalue => valueA function to format tooltip's overlay
tipPropsObject{
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.

NameTypeDefaultDescription
classNamestring''Additional CSS class for the root DOM node
minnumber0The minimum value of the slider
maxnumber100The 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 styleand labelproperties.
stepnumber or null1Value to be added or subtracted on each step the slider makes. Must be greater than zero, and max- minshould be evenly divisible by the step value.
When marksis not an empty object, stepcan be set to null, to make marksas steps.
verticalbooleanfalseIf vertical is true, the slider will be vertical.
handle(props) => React.ReactNodeA handle generator which could be used to customized handle.
includedbooleantrueIf the value is true, it means a continuous value interval, otherwise, it is a independent value.
reversebooleanfalseIf the value is true, it means the component is rendered reverse.
disabledbooleanfalseIf true, handles can't be moved.
dotsbooleanfalseWhen the stepvalue is greater than 1, you can set the dotsto trueif you want to render the slider with dots.
onBeforeChangeFunctionNOOPonBeforeChangewill be triggered when ontouchstartor onmousedownis triggered.
onChangeFunctionNOOPonChangewill be triggered while the value of Slider changing.
onAfterChangeFunctionNOOPonAfterChangewill be triggered when ontouchendor onmouseupis triggered.
minimumTrackStyleObjectplease use trackStyleinstead. (only used for slider, just for compatibility , will be deprecate at rc-slider@9.x)
maximumTrackStyleObjectplease use railStyleinstead (only used for slider, just for compatibility , will be deprecate at rc-slider@9.x)
handleStyleArray[Object]Object[{}]
trackStyleArray[Object]Object[{}]
railStyleObject{}The style used for the track base color.
dotStyleObject{}The style used for the dots.
activeDotStyleObject{}The style used for the active dots.

Slider

NameTypeDefaultDescription
defaultValuenumber0Set initial value of slider.
valuenumber-Set current value of slider.
tabIndexnumber0Set the tabIndex of the slider handle.
ariaLabelForHandlestring-Set the aria-labelattribute on the slider handle.
ariaLabelledByForHandlestring-Set the aria-labelledbyattribute on the slider handle.
ariaValueTextFormatterForHandle(value) => string-A function to set the aria-valuetextattribute 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.1for more information.

Range

NameTypeDefaultDescription
defaultValuenumber[][0, 0]Set initial positions of handles.
valuenumber[]Set current positions of handles.
tabIndexnumber[][0, 0]Set the tabIndex of each handle.
ariaLabelGroupForHandlesArray[string]-Set the aria-labelattribute on each handle.
ariaLabelledByGroupForHandlesArray[string]-Set the aria-labelledbyattribute on each handle.
ariaValueTextFormatterGroupForHandlesArray[(value) => string]-A function to set the aria-valuetextattribute 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.1for more information.
countnumber1Determine how many ranges to render, and multiple handles will be rendered (number + 1).
allowCrossbooleantrueallowCrosscould be set as trueto allow those handles to cross.
pushableboolean or numberfalsepushablecould be set as trueto 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:

Development

npm install
npm start

Example

npm startand then go to http://localhost:8005/examples/

Online examples: http://react-component.github.io/slider/

Test Case

http://localhost:8005/tests/runner.html?coverage

Coverage

http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage

License

rc-slideris released under the MIT license.

以上是 rc-slider 的使用教程帮助文档。


上一篇:rc-swipeout
下一篇:rc-drawer
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部