react-component/slider

React Slider

rc-slider

Slider UI component for React

Install

Example

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

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

Usage

Slider

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

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

Range

Please refer to #825 for information regarding usage of Range. An example:

import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

export default () => (
  <>
    <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('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.
keyboard	boolean	true	Support using keyboard to move handlers.
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.
onBeforeChange	Function	NOOP	onBeforeChange will be triggered when ontouchstart or onmousedown is triggered.
onChange	Function	NOOP	onChange will be triggered while the value of Slider changing.
onChangeComplete	Function	NOOP	onChangeComplete will be triggered when ontouchend or onmouseup is triggered.
minimumTrackStyle	Object		please use trackStyle instead. (only used for slider, just for compatibility , will be deprecate at [email protected] )
maximumTrackStyle	Object		please use railStyle instead (only used for slider, just for compatibility , will be deprecate at [email protected])
handleStyle	Array[Object] | Object	[{}]	The style used for handle. (both for slider(Object) and range(Array of Object), the array will be used for multi handle following element order)
trackStyle	Array[Object] | Object	[{}]	The style used for track. (both for slider(Object) and range(Array of Object), the array will be used for multi track following element order)
railStyle	Object	{}	The style used for the track base color.
dotStyle	Object | (dotValue) => Object	{}	The style used for the dots.
activeDotStyle	Object | (dotValue) => Object	{}	The style used for the active dots.

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	Array[string]	-	Set the aria-label attribute on each handle.
ariaLabelledByGroupForHandles	Array[string]	-	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.

SliderTooltip

The Tooltip Component that keep following with content.

Development

npm install
npm start

Test Case

npm run test

Coverage

npm run coverage

License

rc-slider is released under the MIT license.

slider's Issues

Raise onChange event only when change is done.

It would be great to add prop like "changeDone" which would be an event raised only when user has finished sliding (on mouseUp). I'm doing some ajax requests on change event, but it is bad for perfomance to call ajax every time the "onChange" event is raised :(

Reverse min/max of slider

Hi,

I have been using this slider in a couple projects and was wondering if there is any easy configuration to change the slider direction from min --> max to max --> min.

Example values:
|100--------------50-------------0|

Essentially the max value is to the left of the slider and the min is to the right.

add tooltip for handler when slider has no `marks` props

样式表不应设置全局样式

位于assets/index.css中的代码：

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:before,
*:after {
  box-sizing: border-box;
}

这些代码一旦被用在其他项目中，极有可能破坏原有代码，建议缩小使用范围。

拆分出一个基础版本

slider/lib/base.js

不要太复杂，用于移动，现在的功能集于 base 再做。

https://demos.jquerymobile.com/1.2.0/docs/forms/slider/

Mark labels overflow slider width

Due to the way the labels are positioned with position: absolute and percentage widths, the labels are very often overflowing very badly off the left and right edges of their container, especially if very long label text is used.

默认 step=1 时，拖动滑块有卡顿感

参照原生 range 控件的滑动感

bug: if `value` is set, handle should not be abled to move

tooltip crashes

Hi!

This might be more of an issue with your Tooltip/Trigger library...

Anyway, when draging the handle of an Rcslider, line 107 in file lib/Trigger.js in dependency rc-trigger gives me trouble:

I have removed this line to get it to work for now. But maybe you can take a look at this if you have the time !

I am running React 0.14.0, browserify, babel etc...

Thank you

Is it possible to distribute marks with offset along the line, not centered evenly?

I want to implement the following time slider. Its values are minutes from 0 to 30 (actually in seconds from 0 to 1800). Please pay attention that first 15 minutes occupy about 70% of the slider length. And other 15 minutes occupy the remaining 30% of the length of the slider:

Is it possible to implement it with your plugin? And so that the handle would still move smoothly.

Because it looks quite ugly with default distribution, when marks are distributed evenly:

Slider crashes when nextProps.null !== null and this.props.step === null.

This issue happens because the function getPrecision is reading this.props which is not up to date yet.
To reproduce the error, Render slider with step={null} then re-render with step={1}

changing min/max modifies value

Great component! But when dynamically changing the min or max prop the value is changed? Surely it should limit to the max or min rather then changing value. Thanks!

Empty

It just renders nothing... not sure but this doesnt work.. I see all the div's but they are all invisible.

feat: the width of mark should be configurable

See: #49

version 1.6.0 is not working properly in ie8

with the new version is not passing the tests for ie8.
With ranges the drag and drop of the sliders is a little weird.
I'll try to give a look at it because the ranges is a nice feature to have.

add `isIncluded` props

How to read "marks" prop?

How to read "marks" prop? In JS an object cannot contain commas. But you show comma:

object{number: string} or 
object{number: object{ style, label }} // style, label? How is that?

object{ style, label } ??

Connecting upper and lower bounds only changes upper bound

An attempt to connect the slider's upper and lower bounds, we rerender a <Slider range allowCross={ false } value={[ a, b ]} /> with both lower and upper bounds changed the same amount, resulting in only the upper bound changing when the lower bound is reduced.

This seems to be because the allowCross-check handling the change of the lower bound hits the allowCross-check for the upper bound passing the lower bound. As handle defaults to upperBound the check concludes that the new value for the lower bound should be the previous lower bound.

This results in only our upper bound moving when we change them both.

IE9 not supported

Hi All,

I couldn't make the slider show in IE9, anything special need to do? Thanks.

Pre-transpile source code before publishing on npm

Would it be possible to get you to pre-transpile the source code prior to publishing on npm, as it causes issues when trying to use it while excluding the node_modules folder from transpilation.

Here is another thread about the issue for a different project: pburtchaell/react-notification#8

feature: vertical slider

SCSS version of the slider styles

Hi All,

Thanks for the module - I've just gone through and converted the styles to Sass for inclusion in a Sass based project I'm working on. I've popped the results in a gist. Not sure if the project is interested in this, however Sass is tending to win over less these days so I thought it may be handy.

Cheers

Basic example doesn't even work

I'm on the latest version: 3.1.4 with [email protected]

I can't get a simple basic slider to work without getting the following error:

Cannot read property 'toFixed' of undefined

Any clue what's this about? I need to apparently set the marks props... but that won't make it a basic slider right?

feature: independent Marks

目前的 marks 属性会强制设定为 step 点。导致下面的需求无法实现：

希望 marks 属性可以和 step 脱钩，只是单纯起到刻度的作用。

optimize handler hover tooltip

使用 rc-tooltip 会频繁闪动

How to build production?

I want to use this awesome slider in my application.
I forked this repo and modified something , but I don't know how to build production like release file. Maybe some scripts about build release has already in the repo?
thank you!

Package.json `main` set to wrong reference.

Version 1.2.0 of rc-slider that's published on NPM has the package.json main set to ./lib/index.js, which doesn't exist in the module. This means whenever you try to require the module you get a Cannot find module 'rc-slider' error. :(

feature: Provide 'Always show tooltip' option

It's a nice looking tooltip - it'd be great to have the option to always show it.

Dots and Marks simultaneously cause duplicated keys warning from react

Slider with dots={true} and marks that match some of dots values cause duplicated keys warning:
Warning: flattenChildren(...): Encountered two children with the same key, .$5.

The combination is valid otherwise if one wants mark on every step but just a few of them labelled.
<RcSlider min={5} max={50} step={5} defaultValue={10} dots={true} marks={{5: '5',10: '10',25: '25', 50: '50'}} />

new html structure

track, mark and step are separated now, it is better to grouped them into step

<div>
<div step/track  style={{borderBottom: 1px solid}}>
<div circle></div>
<div mark></div>
</div>
<div step>
<div circle></div>
<div mark></div>
</div>
</div>

http://react-component.github.io/steps/examples/simple.html

highlight difference between two values

Hello,

I'd like to highlight difference between initial (default) value and current value (change track colour).
Is there any way to do that, e.g. specify different style for specific track ranges, or use range with one handle disabled?

Thanks.

marks 和 step 关系问题

版本：3.0.1

经过 3.0 的改造，刻度 marks 属性现在是对象形式：

marks={{
  "0": "零度",
  "100": "沸点",
}}

这样 marks 和 step 本身没有联系，用户只是用它在已有的 slider 上标注刻度文字。

---

目前的实现，对于 step 不为 1 的情况，完全符合上述描述。

对于 step 为 1 的情况，变成用户只能选择刻度 marks 里指定的值。应该是有问题的。

---

上面的情况是想要实现类似 http://09x.ant.design/components/slider/#demo-mark 的分段式滑块的效果，即用 marks 将滑块变为离散的。而原有的 API 是 marks={['刻度一', '刻度二'，'刻度三']}。

---

以下有两种解决方案：

1. 兼容原有的 API，即当 marks={['刻度一', '刻度二'，'刻度三']} 为数组时，将 marks 和 step 进行绑定，实现离散滑动条。当 marks 为 Object 时，刻度和 step 完全分离。
2. 新增参数 markAsStep 属性，当此属性为 true 时，刻度作为 step ，用户只能选择刻度值。当为 false 时，刻度和 step 完全分离。默认为 false。

How can I restyle the sliders using javascript?

I've seen the css file but I'd like to be able to compute my styles using javascript. What would you suggest is the best way to do this?

Thanks in advance!

feature: Simplify `marks` common case

The requirement of object syntax for marks property is burdensome. See a real example below

    const marks = {
      5: '5',
      10: '10',
      25: '25',
      50: '50',
    };

I propose to enable additional type variants for marks: boolean | numer[] | object
So it will be marks={true} to trigger marks on every dots, marks={[ 5, 10, 25, 50]} to mark specified values, or as it is right now for the labels to differ from actual values.

Also I suggest not to use marks for localization purposes but instead generalize tipFormatter to labelFormatter to be used for both labels and tooltips or add additional markFormatter prop.

Allow range slider handlers swap their position

Better expierence for dragging situation when the two handlers at same position.

移动滑块时 tooltip 应始终出现

too many request are send to server.

I use slider to request on server, but when user change value it send to many request, i know i can use onAfterChange but i want use OnChange also but not so often. I'm trying to think of a solution, but maybe you do once someone has came up

Tooltip formatter

It would be nice to be able to format the tooltip's contents.

feature: customizable handle

Lots of issues are about making tooltip more configurable.

1. #62 wants to show tooltip anytime.
2. #32 wants to format tooltip's content, and disabled tooltip.

rc-slider has become a fattie. And it seems that all of rc-tooltip's APIs are going to be exposed.

How about @just-boris ' suggestion? #32 (comment)

If rc-slider supported customizable handle, you could wrap handle with any kind of tooltip. But the drawback is that it is not as convenient as tipFormatter or tipVisibility.

Discrete Slider?

My code was previously working, but it seems the changes in 3.0 have broken a few things, as I can no longer get a discrete slider.

Is this now the correct way of defining the marks object?

marks:{"0":"8-HR", "33":"1-Day", "66":"3-Day", "100":"7-Day"}

and should "included" be set to false? This is still giving me a continous slider:
<Slider onChange={that.handleChange.bind(that, d.field)} key={"3sliderDiscrete"} included={false} marks={d.marks} />

Ability to show tip even when step is null.

I want the ability to show the tip even though my step is null.

Range mode for marks

It would be nice to have slider with specific marks in range mode.
Is there a some issues? Maybe I can help to resolve them?

Doesn't work, no any slider visible

There is no any slider visible if you install it the way you suggest. Height of the slider is 0. Some markup of the slider in inserted into element but it is not visible so it is not possible to use it

简化属性 values/defaultValues

要共用 value/values defaultValue/defaultValues 参考 原生 select multiple

High maximum value / step causes errors

As the slider's max value increases performance degrades steadily, before failing outright at higher values. This looks to be a function of max value and step together (the number of actual steps on the slider). I was trying this out as a currency amount input slider so the max value was well into the tens / hundreds of thousands.

The error is:

Unhandled promise rejection RangeError: Maximum call stack size exceeded(…)

I was getting this at:

• max = 200,000 and step = 1
• max = 100,000 and step = 0.5

rc-trigger 1.2.1 is not supporting ie8

in 1.2.0

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

in 1.2.1

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

The 'default' in ie8 is a keyword, which is not allow to be a key. I believe is a webpack config problem.

How to get current slider value?

How to get current slider value?

currentValue = document.getElementById( WHAT_ID? )

Or is there a special method?

feature: double handlers

支持双滑块

对于连续的滑块，step 大于 1时，不需要渲染小圆点

对这个问题，新增 withDots 属性，默认值为 false，如果需要小圆点，手动声明告诉它。

// withDots: React.PropTypes.bool

<Slider withDots className='rc-slider' step={20}/>

Uncaught TypeError: Can't add property context, object is not extensible

Hi, I have just a basic setup

var React = require('react')
var Rcslider = require('rc-slider')

React.render(<Rcslider/>, document.getElementById('chart'))

And gets back error Uncaught TypeError: Can't add property context, object in ReactCompositeComponent.js:153
which is inst.context = publicContext

Any idea?