TypeScript icon, indicating that this package has built-in type declarations

    1.6.3 • Public • Published

    🕹️ 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
    • Touch support
    • Tooltip support
    • Style based: no images / SVGs


    🚀 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 test


    import React from "react";
    import ReactDOM from "react-dom";
    import { CircleSlider } from "react-circle-slider";
    export class App extends React.Component {
        constructor(props) {
            this.state = { value: 0 };
        handleChange = value => {
            console.log(`Changed value ${value}`);
            this.setState({ value });
        handleChangeRange = event => {
        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 10 knob radius in px
    circleWidth Number 5 width of circle in px
    progressWidth Number 10 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
    knobColor String #e9eaee color of knob
    disabled Boolean false disabled status
    shadow Boolean true shadow on knob
    showTooltip Boolean false tooltip
    valuePrefix String NOOP prefix of value within tooltip
    valueSuffix String NOOP suffix of value within 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




    npm i react-circle-slider-hooked

    DownloadsWeekly Downloads






    Unpacked Size

    65.7 kB

    Total Files


    Last publish


    • denyo