JSPM

  • Created
  • Published
  • Downloads 13576
  • Score
    100M100P100Q180155F
  • License MIT

React input slider component

Package Exports

  • react-input-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-input-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-input-slider

React input slider component

Installation

npm install react-input-slider --save

Demo

https://wangzuo.github.io/react-input-slider/example

Usage

var React = require('react');
var InputSlider = require('react-input-slider');

var App = React.createClass({
  getInitialState() {
    return {
      x: 10,
      y: 10
    };
  },

  render() {
    return (
      <InputSlider
        className="slider slider-xy"
        axis='xy'
        x={this.state.x}
        xmax={100}
        y={this.state.y}
        ymax={100}
        onChange={this.handleChange}
      />
    );
  },

  handleChange(pos) {
    this.setState({
      x: pos.x,
      y: pos.y
    });
  }
});

Props

name type description default
axis string type of slider ('x', 'y', 'xy') 'x'
x number value of x
xmax number max of x
xmin number min of x 0
y number value of y
ymax number max of y
ymin number min of y 0
onChange function change callback null
onDragEnd function dragEnd callback null

License

MIT