zillow / react-slider Goto Github PK
View Code? Open in Web Editor NEWAccessible, CSS agnostic, slider component for React.
Home Page: https://zillow.github.io/react-slider
License: MIT License
Accessible, CSS agnostic, slider component for React.
Home Page: https://zillow.github.io/react-slider
License: MIT License
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.
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!
My onChanged
function gets called twice :-\ How can I avoid it?
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.
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 (
export default DepthMeterInput
Working URL is https://mpowaga.github.io/react-slider
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.
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 (
export default test
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
.
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?
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!
With React v15.0.1
Hi,
Could you add a License to the repo? It's not really usable otherwise.
Thanks!
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.
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.
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.
How can i use this compoenent in my exiting React Page???
I already have a
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.
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?
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.
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).
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);
}
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.
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
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.
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.
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
It would be nice to have possibility to change position of slider cursors using keyboard.
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?
plz
It would be awesome if I could invert the axis by setting a property invert
to true
So, I've encountered an issue where new values of min, max, and value do not correctly propagate.
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:
this.state.min
and this.state.max
to null before setting either 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
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?
When opening the demo index.html it fails with this error:
(index):98 Uncaught TypeError: React.initializeTouchEvents is not a function
commit: 63eb81e
Browsers:
=> npm ls
[email protected] /Users/timm/Projects/react-slider/react-slider
└── [email protected]
=> npm -v
3.5.3
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
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.
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.
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
.
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:
In the image, four sliders were moving simultanously.
Is it also possible to add bower support?
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
I am using react-slider with redux. Handles are not updated when we pass a new value to ReactSlider component
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?
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".
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.