React Circular Slider Component
Installation
npm install --save circular-slider-react
How To Use
First import this component where you want to use it
import ReactCircularSlider from "circular-slider-react"
Then just renders it
<ReactCircularSlider />
Props
| Prop | Description | Default value |
|---|---|---|
| circleColor | Sets background color | black |
| knobColor | Sets knob color | blue |
| radius | Sets circle radius | 100 |
| halfCircle | Sets if circle is half or not | false |
| min | Sets min value | 0 |
| max | Sets max value | 100 |
| stepSize | Sets step size | 1 |
| value | Sets initial value | 0 |
| onChange | callback function on value change | null |
Example
import React, { Component } from "react";
import ReactCircularSlider from "circular-slider-react";
class App extends Component {
render() {
return (
<ReactCircularSlider size={500} circleColor="black" value={10} stepSize={2} />
);
}
}
export default App;