🕹️ react-circle-slider

Circle Slider Component for React.js

⚡ 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.

npm install --save react-circle-slider

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

🔲 NPM-scripts

Install dependencies from package.json:

npm install

Runs the app in the development mode.
Open http://localhost:1234 to view it in the browser.

npm run dev

Run linter

npm run lint

Start tests followed by jest

npm run test

Usage

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 (
            <CircleSlider value={value} onChange={this.handleChange} />
        );
    }
}

ReactDOM.render(<App />, 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