react-drag-range
Try it - Live Examples
Install
npm install --save react-drag-range
Demo
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 run prepare
npm run dev
navigate to localhost:8080
Features
- X, Y axis click/drag detection
- width, height percent detection
- min, max range restrictions
- decimal places rounding
- double click to reset value
- event callbacks
Contributing
Pull Requests are very much appreciated.
You can also help by staring, sharing and reporting issues.
Props
propTypes: {
yAxis: PropTypes.bool,
percent: PropTypes.bool,
unit: PropTypes.number,
rate: PropTypes.number,
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,
},
Basic Usage
Please take a look at the examples
import DragRange from 'react-drag-range'
<DragRange
value={this.state.value}
onChange={(value)=>this.setState({value})}
>
<span>this span detects X axis dragging ({this.state.value})</span>
</DragRange>
<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)
License
MIT