mapbox / react-range Goto Github PK

View Code? Open in Web Editor NEW

23.0 108.0 15.0 13 KB

A react range slider component

License: ISC License

JavaScript 100.00%

react-range's Introduction

⚠️ This repo is archived ⚠️

For a maintained alternative, check out https://mapbox.github.io/mr-ui/#controlrange.

React Range

A react component that makes <input type='range' /> compatible across all browsers.

Why?

It is a known issue the onChange event does not work in IE. This seeks to be a simple drop in replacement for any <input type='range' /> and still have the onChange event fire in IE.

Usage

You can pass in any props and classNames as necessary:

var Range = require('@mapbox/react-range');

<Range
  className='slider'
  onChange={this.handleOnChange}
  type='range'
  value={20}
  min={0}
  max={100} />

react-range's People

Contributors

Stargazers

Watchers

Forkers

openmaphub lilactown dspnorman joepvl aslafy-z lixiaoyan wealth-june josevfernandez testbigorg damienleroux rubythonode antonio-maranhao ratson isabella232

react-range's Issues

'event' should be 'e' in onRangeChange

Left/right and up/down arrows should trigger onChange

Dragging handle doesn't sometimes keep state value

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.

Error in Safari behaviour

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.

Can't drag the slider

I'm wondering why I cannot drag the slider. I have to click a position for it to work.

Feature request: range with two handles

🙏

react should be peerDependancy

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.

React v15 compatibility

~~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.

Slider value becomes detached from nob

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.