Try it - Live Examples
npm install --save react-drag-range
Check out Live Examples and the example code, or run locally
git clone git@github.com:Radivarig/react-drag-range.git cd react-drag-range npm install # npm install will also call npm run prepare which was setup to install peer deps # but npm install <package> will remove them as they are not in (dev)dependencies.. # so if you instal something additional, call `npm run prepare` again npm run prepare npm run devnavigate to localhost:8080
- X, Y axis click/drag detection
- width, height percent detection
- min, max range restrictions
- decimal places rounding
- double click to reset value
- event callbacks
Pull Requests are very much appreciated.
You can also help by staring, sharing and reporting issues.
propTypes: { yAxis: PropTypes.bool, // default is x percent: PropTypes.bool, // if value should be x width or y height unit: PropTypes.number, // unit in pixels rate: PropTypes.number, // how much to change per unit value: PropTypes.number, onChange: PropTypes.func, onDelta: PropTypes.func, min: PropTypes.number, max: PropTypes.number, default: PropTypes.number, decimals: PropTypes.number, onDragStart: PropTypes.func, onDragEnd: PropTypes.func, onMouseUp: PropTypes.func, onMouseDown: PropTypes.func, onDoubleClick: PropTypes.func, doubleClickTimeout: PropTypes.number, disablePercentClamp: PropTypes.bool, disableReset: PropTypes.bool, },Please take a look at the examples
// ... import DragRange from 'react-drag-range' // ... // simple X axis detection <DragRange // percent // yAxis value={this.state.value} onChange={(value)=>this.setState({value})} > <span>this span detects X axis dragging ({this.state.value})</span> </DragRange> // ... // wrap one DragRange in another to get both X and Y axis detection <div> <div> <DragRange percent yAxis getTarget={()=>this.refs['target']} value={this.state.valueY} onChange={(valueY)=> this.setState({valueY})} > <DragRange percent getTarget={()=>this.refs['target']} value={this.state.valueX} onChange={(valueX)=> this.setState({valueX})} > <div ref='target' style={imageStyle}/> </DragRange> </DragRange> </div> ({this.state.valueX}%, {this.state.valueY}%) </div> // ... require('react-dom').render(<DragRangeViewer/>, document.body)MIT