mapbox / react-range Goto Github PK
View Code? Open in Web Editor NEWA react range slider component
License: ISC License
A react range slider component
License: ISC License
If you click on the slider nob and start dragging, then drag off the range, the nob will continue to move, but the updated value is not emitted.
We likely need to listen for mousemove and mouseup events globally when a mouse down is detected.
Tested in Safari 9.
I'm wondering why I cannot drag the slider. I have to click a position for it to work.
I noticed that when I drag the handle, the value doesn't change. I would have to do it multiple times before the state gets updated. Clicking anywhere on track is excellent. It works every time. I hope you can fix the dragging of handle/knob. I did the test on IEMobile browser on my Nokia Lumia 920 phone.
React.findDOMNode
was removed after having been deprecated in v0.14. It is used here in componentWillReceiveProps
. Will send a PR with a fix soon.
EDIT My bad, ReactDOM.findDOMNode
is actually being used, which is of course not deprecated.
Still, I was getting
Uncaught Invariant Violation: traverseParentPath(โฆ): Cannot traverse from and to the same ID, ``
after upgrading the app I'm working on to React v15 today, and traced it to the findDOMNode
call in this component. Removing the call in favour of using a callback ref fixed it for me. It also appears to be considered more idiomatic, since the documentation for findDOMNode
says
In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.
To me that reads like avoiding it is the better option. I do realise that callback refs were only introduced in React v0.13, so this would be a breaking change in that respect. To avoid that we could also opt for going with a string ref, but the documentation on those clearly states the following:
Although string refs are not deprecated, they are considered legacy, and will likely be deprecated at some point in the future. Callback refs are preferred.
PR still coming.
EDIT 2 PR made. I also just noticed that the package requires "react": "^0.14.2"
, so I guess this won't be breaking after all.
There is a problem with this component in Safari. If you click a location on the slider and the nob jumps straight there it's ok. It is also ok if you drag and drop the slider on a specific location, but only if you do not end up with the cursor outside of the slider.
To reproduce: Select nob in Safari, move the cursor off the slider, then move sideways (the nob will move), however when you do mouseup, the onChange
function does not fire.
๐
As it stands, react-range depends on react which can introduce a different version of React and thus to:
Uncaught Error: Invariant Violation: Modal.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
It can be fixed temporarily by deleting node_modules/react-range/node_modules/react
. I think the standard way of handling this is to make it a peer dependancy.
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.