Comments (3)
I fixed it by adding an onInput
event handler:
@@ -7,6 +7,7 @@ var Range = React.createClass({
displayName: 'Range',
propTypes: {
onChange: React.PropTypes.func,
+ onInput: React.PropTypes.func,
onClick: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
onMouseMove: React.PropTypes.func
@@ -15,6 +16,7 @@ var Range = React.createClass({
return {
type: 'range',
onChange: function(){},
+ onInput: function(){},
onClick: function(){},
onKeyDown: function(){},
onMouseMove: function(){}
@@ -25,6 +27,10 @@ var Range = React.createClass({
if (e.buttons !== 1 && e.which !== 1) return;
this.props.onChange(e);
},
+ onRangeInput: function(e) {
+ this.props.onInput(e);
+ this.props.onChange(e);
+ },
onRangeClick: function(e) {
this.props.onClick(e);
this.props.onChange(e);
@@ -45,6 +51,7 @@ var Range = React.createClass({
onClick: this.onRangeClick,
onKeyDown: this.onRangeKeyDown,
onMouseMove: this.onRangeChange,
+ onInput: this.onRangeInput,
onChange: function() {},
ref: this.setRangeRef
});
from react-range.
I can reproduce this in Safari 9 (El Capitan) and Mobile Safari iOS 9.2.
The slider is effectively unusable on a touch device, since it's nearly impossible to ensure the drag motion ends within the slider track.
from react-range.
Mapbox is no longer maintaining react-range. For a current alternative, check out https://mapbox.github.io/mr-ui/#controlrange.
from react-range.
Related Issues (9)
- Slider value becomes detached from nob HOT 2
- Feature request: range with two handles HOT 2
- react should be peerDependancy HOT 2
- React v15 compatibility HOT 1
- Can't drag the slider HOT 1
- Dragging handle doesn't sometimes keep state value HOT 1
- Left/right and up/down arrows should trigger onChange
- 'event' should be 'e' in onRangeChange
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-range.