zillow / react-slider

Accessible, CSS agnostic, slider component for React.

React Slider

Accessible, CSS agnostic, slider component for React.

Installation

npm install react-slider

API Documentation

For component props, methods, and living examples, see the demo:

https://zillow.github.io/react-slider/

TypeScript Support

npm install --save-dev @types/react-slider

License

See the License file.

react-slider's Issues

License

Hi,

Could you add a License to the repo? It's not really usable otherwise.

Thanks!

Project alive? There are many PRs to merge!

Hey,

this component is really useful but it has quite some bugs, which several of the PRs fix.

Any chance to have them included in this repo?

Warning: `div` was passed a style object that has previously been mutated

Hi.
We started having this react warning with react-slider, and I am not sure what is causing it, as our implementation has not changed, neither did we update something, and it was working fine with the current react version (0.14.1)

Any ideas? Is it rather a problem on our side, or is it something to be considered within react-slider?

Our implementation/usage:

<ReactSlider className='RangeSlider'
    value={[this.state.rangeStart, this.state.rangeEnd]}
    min={this.props.min}
    max={this.props.max}
    withBars={true}
    onChange={onSliderChange}
    onAfterChange={this.setFilterWithApi}
    snapDragDisabled={false}
    pearling={false}
    minDistance={this.props.stepSize}
    step={this.props.stepSize}
>
    <div className='facet-handle' />
    <div className='facet-handle' />
</ReactSlider>

The full warning

Warning: `div` was passed a style object that has previously been mutated.  
Mutating `style` is deprecated. Consider cloning it beforehand.  
Check the `render` of `ReactSlider`.  
Previous style: {position: "absolute", willChange: "", left: 0, right: NaN}.  
Mutated style: {position: "absolute", willChange: "", left: 0, right: NaN}.

warning @ warning.js:45
checkAndWarnForMutatedStyle @ ReactDOMComponent.js:185
ReactDOMComponent.Mixin._updateDOMProperties @ ReactDOMComponent.js:767
ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:696
ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:642
ReactReconciler.receiveComponent @ ReactReconciler.js:87
ReactChildReconciler.updateChildren @ ReactChildReconciler.js:84
ReactMultiChild.Mixin._reconcilerUpdateChildren @ ReactMultiChild.js:216
ReactMultiChild.Mixin._updateChildren @ ReactMultiChild.js:351
ReactMultiChild.Mixin.updateChildren @ ReactMultiChild.js:326
ReactDOMComponent.Mixin._updateDOMChildren @ ReactDOMComponent.js:865
ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:697
ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:642
ReactReconciler.receiveComponent @ ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473
wrapper @ ReactPerf.js:66
ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:421
ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:102
runBatchedUpdates @ ReactUpdates.js:129
Mixin.perform @ Transaction.js:136
Mixin.perform @ Transaction.js:136
assign.perform @ ReactUpdates.js:86
flushBatchedUpdates @ ReactUpdates.js:147
wrapper @ ReactPerf.js:66
Mixin.closeAll @ Transaction.js:202
Mixin.perform @ Transaction.js:149
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ ReactUpdates.js:176
enqueueUpdate @ ReactUpdateQueue.js:24
ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js:190
ReactComponent.setState @ ReactComponent.js:65
(anonymous function) @ react-slider.js?b78f:287

Scaling function

It would be nice to have scaling function, like in this project: https://github.com/seatgeek/react-slider

I would go with the similar interface as https://github.com/seatgeek/react-slider has:

scalingFunction

A function that takes two arguments, the first representing the x-position of the slider and the second the width of the slider. Use this to control the mapping of the domain of numbers the slider represents onto the range of pixel locations of the slider. By default, this is set to the non-linear

function(x, constantBase) {
    return Math.pow(x, 2) / Math.pow(constantBase, 2);
}

and

inverseScalingFunction

A function that should be the inverse of the operation of the scalingFunction. By default, it is set to:

function(x, constantBase) {
    return Math.sqrt(x) / Math.sqrt(constantBase);
}

Host an example

plz

Upgrade from 0.3.4 to 0.4.1 results in handles not moving

Did a simple upgrade of react-slider and now my handles are not moveable and by default they are stuck all the way on the left side, where they should be set in the middle as before when I was using 0.3.4.

Here's what my usage looks like (in jsx):

<ReactSlider
  className="range-slider"
  name={this.props.name}
  min={10}
  max={70}
  onChange={this.changeValue}
  defaultValue={40} />

I also diffed my styles with the styles you provide for the slider in the index.html, and the only style differences that I am adding that are not in yours are the following:

// Outer Container div for the Range Slider
.range-slider {
  width: 100%;
  height: 12px;
  background: #ddd;
  border: none;
  border-radius: 3px;
  background-color: $sliderColor;
}

.handle {
    font-size: 0.9em;
    text-align: center;
    color: white;
    cursor: pointer;
    border: 4px solid #ffffff;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: $sliderThumbColor;
    margin-top: -11px;
    -webkit-box-shadow: 0 0 5px 0 #000000;
    box-shadow: 0 0 5px 0 #000000;
}

Every other style is exactly the same as your example.

When I inspect the element while dragging, I'm noticing that the inline left style attribute does not change at all, it just stays empty:

Screenshot above taken while dragging the handle, notice that left is not assigned to anything.

This is a bummer because I really need 0.4.1's onAfterChange feature to perform actions when the handle stops moving as opposed to each position change.

onAfterChange callback is called when no change occurs

Hi,

I'm using v0.7.0 and the onAfterChange callback is getting called when no change occurs. For example if I just click on or tap a handle without changing it's value or drag a handle away from and then back into the original position the onAfterChange callback is still getting called.

It would be much better if the onAfterChange callback is only called if a slider value actually changes.

Version 0.3.3 doesn't work when providing no value

In version 0.3.2 this was working:

<Slider min={1} max={5} defaultValue={myNumber} onChanged={this.handleMyNumberChange} withBars>
  <div className="handle" />
</div>

but in version 0.3.3 it leads to NaN errors.

Change my code to this

<Slider min={1} max={5} value={myNumber} defaultValue={myNumber} onChanged={this.handleMyNumberChange} withBars>
  <div className="handle" />
</div>

and now it works again, but this means currently the slider doesn't work with defaultValue only.

Just notice in my cases the myNumber variable is always in range of the min / max.

Issue Implementing

Hello,

I think this is just my issue, and not a real issue. I'm trying to put this into my react program by doing the following:

var React = require('react');
var MultiSlider = require('react-slider');

var myClass = React.createClass({

render: function () {

    return (
            <MultiSlider defaultValues={[8, 1]} />
    );
}

});

module.exports = myClass ;

When I run it, nothing appears on screen, but it shows up in the developer tools. The div with class "class='slider'" has a height of 0px. I'm not sure where I'm going wrong...I'm sure it's just a silly mistake on my end!

Thanks in advance,
Alex

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're adding a new property in the synthetic event object. The property is never released. See https://fb.me/react-event-pooling for more information.

With React v15.0.1

invert axis

It would be awesome if I could invert the axis by setting a property invert to true

Custom Class Names with CSS Modules

For the barClassName, you set the class to something like bar bar-1.

However, when using CSS Modules, it is impossible to target .bar-1, since the class names generated from bar and bar-1 are completely separate, and have no relation to each other.

Maybe a solution would be to allow barClassName to take an array of names to use.

Warning when using React 0.14

When using react-slider in a React 0.14 project, the following warning is issued by React:

ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by ReactSlider

How can i use this compoenent in my exiting React Page???

How can i use this compoenent in my exiting React Page???

I already have a

where i am rendering the React compoenent. In that compoenent i need a slider slider component. How can i use this component??

Handles are not updated when using controlled component

I am using react-slider with redux. Handles are not updated when we pass a new value to ReactSlider component

Suggested improvements

Slider should not require a user-defined handle component. It should use a default handle if one is not provided.

Also, the handle shouldn't be required to be a component. A div should be acceptable.

I may end up submitting a pull request, but my time is limited right now.

Values return problem

Hey,

I like your work and product (slider) very much. Unfortunately I have stumbled upon a problem with returning values. I can't figure down, basing on source file, how to do it correctly (2 values), so there will be 2 correct values returned.

All best,
Pszek

broken out of the box?

Is there something im doing wrong? the component wont render

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSlider from 'react-slider';

const DepthMeterInput = React.createClass({

render() {
return (

blahahh

);
}
})

export default DepthMeterInput

Problem with getting slider's length

The slider doesn't behave correctly when it's contained in an element that expands on some user action. By "expands" I mean a transition that involves transform: scale(...) CSS property.

This issue is a bit similar to this: #15 because the root cause of the issue is that the size in component's state is not up to date.

Cannot figure out slider size if component is hidden

I have a component that is hidden on initial load, so on your componentDidMount you are calling _handleResize and that runs getBoundingClientRect and it returns all zeros.

Right now, I am calling the _handleResize function as a work around when my component is visible. Is there something better I can do?

Slider does not work with touch devices (in Chrome?)

Hello,

I configured your slider in a project of mine, and it was working fine on desktop. However, when I tested it on mobile devices it seems as if it doesn't detect touch release.

Steps to reproduce:

• Open Chrome
• Go to https://cell303.github.io/react-slider/
• open developer tools and click the phone icon in the "Elements, Network, Sources, ..." tab. This will make you emulate a touch device.
• Click on one slider, see that it changes to grey and move it around works fine. However, when I release the mouse button it stays grey. If I click on another slider then they both move simultanously.

In the image, four sliders were moving simultanously.

Rename prop `pearling` to something else

So, uh, I'm not entirely sure where the definition of this wording came from, but trying to google it lead to some very interesting, nsfw, results.

Surely there's something better that better describes what's going on? Such as moveOtherHandlers.

onChanged fired twice

My onChanged function gets called twice :-\ How can I avoid it?

In IE9 browser window loses focus

• IE9 has issue with blur function - browser window loses focus when blur is called on body
• similiar to issue described here: https://stackoverflow.com/questions/5657371/ie9-window-loses-focus-due-to-jquery-mobile#[phone]

demo vs. code base discrepancy

Your demo uses translate() to position the handles and seems to work correctly while your codebase uses left and doesn't seems to be positioning the handles in the correct place. Which is newer code? Translate is more performant in animations so I assume that the demo is an upgraded version. Can that code be made available?

Jump to position

I have sliders with same settings:
min: -1,
max: 1,
step: 0.01,
withBars: true,

When I click on 'label 2' to position 0, handlebar jump to position on right side of cursor:

After I zoom in/out web page jump to position works fine :)

I have problem on Yosemite OS X with Chrome, Firefox, Safari and IE11 on virtual. On Safari "zoom patch" don't work.

Jakub.

Webpack Support

How do I use this with webpack? I want to be able to import {ReactSlider} from 'react-slider' in my JS, but when I try that I get some errors.

Default style looks bad.

Why can't the slider come with a default style that doesn't look so bad? So if I wanted to use the component, I wouldn't have to do the styling myself.

- Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Hello,

I am getting this error below when I load my react component that uses react-sider in my JEST beforeEach() method. (I am using React 15.3.0, react-slider 0.7.0, JEST 13.2.3)

• Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

I am sure I didn't create my component out side of the render() and I don't have multiple copies of React (I verified with this command npm ls | grep react )..

Does anyone here has the same issue?

Bower support

Is it also possible to add bower support?

Suggested enhancement: Snap-and-drag behavior

For my needs, the user should be able to click (or touch) anywhere on the slider, have the handle snap to that position, and continue dragging from there without releasing the mouse button (or finger).

Pull request #14 is my suggested implementation. Future work may include a prop to configure the various behaviors (perhaps similar to noUiSlider's behaviour option).

Changing # of children causes prop discrepency.

This bug is apparent when you use both value and children. Example:

render: function() {
  return <ReactSlider withBars={true} value={this.state.value}>
    {this.state.labels.map(function(label) { return <div>{label}</div>; })}
  </ReactSlider>
}

If you add a value to both value and labels, neither display in the react slider. Here's a jsfiddle demonstrating the bug. The offending code is in the _or function, which relies on this.props.children, but doesn't pull the new children from the updated props in componentWillReceiveProps. Here's that same jsfiddle, with a fix, which I will include in a PR.

Push latest version to npm

@mpowaga

React v15.0.0

Hi guys,

When updating react to the newly releases v15.0 I'm getting this npm error:

peerinvalid Peer [email protected] wants react@>=0.14
Any chance you can bump the dependency to allow v15.0?

Thanks!

Accessibility: change position using keyboard

It would be nice to have possibility to change position of slider cursors using keyboard.

Drag Doesn't Work on Chrome on Ubuntu 14.04

This sounds like it's more likely a chrome issue, but I have Ubuntu 14.04 installed through VirtualBox, and the sliders do not work on chrome. They however, did work on firefox, as well as chrome on my Windows host computer.

Any thoughts on this?

Thanks!

Enable handle move on slider touch for mobile devices

It should work just like it works on mouse down event on slider. This allows slider have a way better UX when used in touch enabled devices. You can just touch anywhere in the slider and start sliding instead of trying to touch exactly the handler.

Some new values of min, max, value do not correctly propagate

So, I've encountered an issue where new values of min, max, and value do not correctly propagate.

1. I set min, max, and value to 100, 400, and 182.
2. I update them to 46, 181, and 93.

Expected behavior: the new min, max, and value are set to 46, 181, and 93.

Observed behavior: the new min, max, and value are set to 100, 181, and 100.

The bug is in componentWillReceiveProps. It sets the new value constrained by the old values for min and max, and so on.

Happy to fix this, but thought I'd check if this approach sounded good:

• The new values of min and max should not be trimmed. To accomplish this, set this.state.min and this.state.max to null before setting either value.
• Set min and max first, then value.

Can't open index.html demo

When opening the demo index.html it fails with this error:

(index):98 Uncaught TypeError: React.initializeTouchEvents is not a function

commit: 63eb81e

Browsers:

• Firefox 45.0a2 (2016-01-25) (OS X)
• Chrome 50.0.2630.0 canary (64-bit) (OS X)

=> npm ls
[email protected] /Users/timm/Projects/react-slider/react-slider
└── [email protected]

=> npm -v
3.5.3

Use of Legacy String Ref API

Code has 2 uses of this.refs and the "legacy string ref API"

ref: 'slider'
ref: 'handle' + i

var slider = this.refs.slider;
var handle = this.refs.handle0;

According to relevant React docs, "string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases".

Issue with getBoundingClientRect() being called on undefined component

This PR brought in a setTimeout before calling for getBoundingClientRect(). This can cause an issue in some situations where the component is unmounted before this call is made thus throwing an exception.

RequireJS issues

When I include react-slider into my RequireJS config, it throws this:

But when I remove it, all works fine without this library. What can lead to this error?

broken out of the box?

Is there something im doing wrong? the component wont render

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSlider from 'react-slider';

const test = React.createClass({

render() {
return (

blahahh

);
}
})

export default test

Handle reordering / Let handle cross over another handle

In some use-cases, it might be necessary to let one handle cross over another handle. While I understand the purpose a slider may contradict this requirement, perhaps there is a not-so-hard way to enable this or work it around. Is this possible? Thanks.

Is there a way to ID the source of the value?

There is a onChange function that is called with the with value.
but is there also a way to add a own integer to it ( as id from what slider the value is coming)
because i got a application with multiple sliders, which can be added dynamicly

Examples how to write tests?

I want to test my component (that uses this one) to make sure that the correct handlers are being invoked. Currently my test looks like this (Using Jest, expect.js, and Enzyme):

it('Calls the onAfterChange prop function on drag', () => {
  const action = expect.createSpy()
  // the onAfterChange prop binds directly to react-slider's onAfterChange prop
  const wrapper = mount(<MyReactSlider range={{ min: 0, max: 1000 }} onAfterChange={action} debounceTime={0} />)
  const handle = wrapper.find('.slider-handle-0')
  handle
    .simulate('mouseDown', { clientX: 0, clientY: 0, pageX: 500, pageY: 500 })
    .simulate('mouseMove', { pageX: 0 })
    .simulate('mouseUp')
})

Unfortunately, action is never invoked. I'm curious to how this component should be tested correctly?

Publish 0.4 to NPM

Reset Value?

Is there a way to reset the value of the slider? There seems to be an issue if I'm dynamically swapping out the min max values - see https://github.com/timarney/react-slider

Roughly this:

click:function(val){
        if(val === 'night'){
           this.setState({min:1,max:200});
        }else{
            this.setState({min:2000,max:4000});
        }
}

slider = Demo({
            min:this.state.min,
            max:this.state.max,
            defaultValue: [this.state.min],
            orientation: 'horizontal',
            withBars: true
            });

The min and max update but the value is messed up until you interact with the slider again... in which case the slider corrects itself.

If there was a way to reset to the default value I'm thinking that would work.

Crash in Win7-IE11

Sometimes catch this bug

Repo links to https://cell303.github.io/react-slider

Working URL is https://mpowaga.github.io/react-slider