rc-ruler-slider

Slider component for React

Install

npm install rc-ruler-slider --save

Usage

import Ruler from 'rc-ruler-slider/dist';
import 'rc-ruler-slider/dist/index.css';

handleDragChange = (value) => {
   console.log(value);
}
 
handleDragEnd = (value) => {
   console.log(value);
}
 
handleDragStart = (value) => {
   console.log(value);
}
 
handleRenderValue = (value) => {
   return `${value}%`;
}
 
<Ruler
   startValue={50}
   onDrag={this.handleDragChange}
   onDragEnd={this.handleDragEnd}
   onDragStart={this.handleDragStart}
   renderValue={this.handleRenderValue)
   start={0}
   end={90}
   step={1}
/>

Proptypes

   propTypes: {
 
      // start current ruler value
      startValue: PropTypes.number,
 
      // start ruler value
      start: PropTypes.number,
 
      // end value
      end: PropTypes.number,
 
      // step of drag
      step: PropTypes.number,
 
      // handle drag function
      onDrag: PropTypes.func,
      
      // handle drag end function
      onDragEnd: PropTypes.func,
      
      // handle drag start function
      onDragStart: PropTypes.func,
      
      // handle custom render value in ruler pointer
      onRenderValue: PropTypes.func,
 
      // class of component
      className: PropTypes.string,
   }

License

MIT