Miss any of our Open RFC calls?Watch the recordings here! »

react-drag-range

0.3.1 • Public • Published

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
npm install
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,   // 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

Install

npm i react-drag-range

DownloadsWeekly Downloads

12

Version

0.3.1

License

MIT

Unpacked Size

64.3 kB

Total Files

24

Last publish

Collaborators

  • avatar