input-range-marks v0.0.2

input-range-marks

Example of usage input-range-marks.

class Demo extends Component {

  onChange=(val)=>{
    console.log('input range value - ', val )
  }
  render() {
    return <div>
      <h1>input-range-marks Demo</h1>
      <InputRange
          width={350} //width of input element
          onChange={this.onChange}  //callback
          inputRangeAttrs={{default:2, min:1, max:5,  step:1}} //base attributes of input type="range"
          disabled={false}
          marks={[                  //array of marks & labels; length of the array must be equal to the number of steps
            {mark: '⏶', label: 'highly unlikely'},
            {mark: '⇧', label: ''},
            {mark: 3, label: 'maybe yes maybe no'},
            {mark: '|', label: 'probably'},
            {mark: '✓', label: 'highly likely'}
          ]}
          fontsize='1em' //font size of marks & labels
      />
    </div>
  }
}