🕹️ react-circle-slider

Circle Slider Component for React.js

!Imgur

⚡ Functionality

- Simple to use
- No extra dependencies
- Highly customizable
- Defining min and max values
- Defining step size
- Defining gradient color
- Touch support
- Tooltip support
- Style based: no images / SVGs

Examples

- To check out live examples visit https://dmitrymorozoff.github.io/react-circle-slider/

🚀 Getting started

Install react-circle-slider using npm.

$3

You can also test the components locally by cloning this repo and doing the following steps:

🔲 NPM-scripts

Install dependencies from package.json:

$3

Runs the app in the development mode.

Open http://localhost:1234 to view it in the browser.

$3

Run linter

$3

Start tests followed by jest

$3

Usage

jsx

import React from "react";

import ReactDOM from "react-dom";

import { CircleSlider } from "react-circle-slider";



export class App extends React.Component {

    constructor(props) {

        super(props);

        this.state = { value: 0 };

    }



    handleChange = value => {

        console.log(

Changed value ${value}

);

        this.setState({ value });

    };



    handleChangeRange = event => {

        this.setState({

            value: event.target.valueAsNumber,

        });

    };



    render() {

        const { value } = this.state;

        return (

            

        );

    }

}



ReactDOM.render(, document.getElementById("root"));





📃 Props



| Props             | Type     | Default   | Description                                                    |

| ----------------- | :------- | --------- | -------------------------------------------------------------- |

| size              | Number   | 180       | size of the slider in px                                       |

| stepSize          | Number   | 1         | value to be added or subtracted on each step the slider makes. |

| knobRadius        | Number   | null      | knob radius in px                                              |

| circleWidth       | Number   | null      | width of circle in px                                          |

| progressWidth     | Number   | null      | progress curve width in px                                     |

| min               | Number   | 0         | the minimum value of the slider                                |

| max               | Number   | 100       | the maximum value of the slider                                |

| value             | Number   | 0         | value                                                          |

| circleColor       | String   |

#e9eaee

 | color of slider                                                |

| progressColor     | String   |

#007aff

 | color of progress curve                                        |

| gradientColorFrom | String   | NOOP      | start gradient color of progress curve                         |

| gradientColorTo   | String   | NOOP      | end gradient color progress curve                              |

| knobColor         | String   |

#fff

    | color of knob                                                  |

| disabled          | Boolean  | false     | disabled status                                                |

| shadow            | Boolean  | true      | shadow on knob                                                 |

| showTooltip       | Boolean  | false     | tooltip                                                        |

| showPercentage    | Boolean  | false     | percentage on tooltip                                          |

| tooltipSize       | Number   | 32        | size of tooltip                                                |

| tooltipColor      | String   |

#333

    | color of tooltip                                               |

| onChange          | Function | NOOP      | when slider is moved,

onChange` is triggered. |

💡 Todo

- [ ] Keyboard support
- [ ] Mouse scroll support
- [ ] Accessibility

💻 Contributing

- For bugs and feature requests, please create an issue
- Lint and test your code
- Pull requests and ⭐ stars are always welcome

License

MIT

Usage

jsx
import React from "react";
import ReactDOM from "react-dom";
import { CircleSlider } from "react-circle-slider";

export class App extends React.Component {
constructor(props) {
super(props);
this.state = { value: 0 };
}

handleChange = value => {
console.log(

);
this.setState({ value });
};

handleChangeRange = event => {
this.setState({
value: event.target.valueAsNumber,
});
};

render() {
const { value } = this.state;
return (

);
}
}

ReactDOM.render(, document.getElementById("root"));

📃 Props

| Props | Type | Default | Description |
| ----------------- | :------- | --------- | -------------------------------------------------------------- |
| size | Number | 180 | size of the slider in px |
| stepSize | Number | 1 | value to be added or subtracted on each step the slider makes. |
| knobRadius | Number | null | knob radius in px |
| circleWidth | Number | null | width of circle in px |
| progressWidth | Number | null | progress curve width in px |
| min | Number | 0 | the minimum value of the slider |
| max | Number | 100 | the maximum value of the slider |
| value | Number | 0 | value |
| circleColor | String |