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 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
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, // 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,
},Basic Usage
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)License
MIT
