Skip to content

dmitrymorozoff/react-circle-slider

Repository files navigation

🕹️ 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

🚀 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