react-slider-simple

react-slider-simple

Install:

yarn add react-slider-simple

or

npm install --save react-slider-simple

Usage:

class App extends Component {
  render() {
    return (
        <Slider
          rounded={false}
        />
    );
  }
}

import React, { Component } from 'react';
import Slider from 'react-slider-simple';

export default class SliderComp extends Component {
  state  = {
    percent: 30,
  }

  onChange = (percent) => {
    console.log(percent);
    this.setState({ percent });
  }
  onDone = (percent) => {
    console.log(`I'm done. here's the percent: ${percent}%`);
  };

  render() {
    const { percent } = this.state;
    return (
        <Slider
          value={percent}
          onChange={this.onChange}
          onDone={this.onDone}
          thumbColor="rgb(219, 112, 147)"
          shadowColor="rgb(219, 112, 100)"
          sliderPathColor="rgb(119, 12, 47)"
        />
    );
  }
}

Properties:

Property	Description	Type	Defaults
onDone	returns % of slider position	function	-
onChange	returns % of slider position	function	-
value	value of slider	number	0
defaultValue	default value of slider	number	0
displayThumb	Always show thumb	boolean	true
rounded	rounded corners	boolean	true
thumbColor	The color of thumb	string	-
shadowColor	The color of shadow	string	-
sliderPathColor	The color of path	string	-