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 [email protected]: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 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