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;