Nepotistic Pontifex Maximus
    Wondering what’s next for npm?Check out our public roadmap! »

    react-circle-slider

    1.6.2 • Public • Published

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

    Install

    npm i react-circle-slider

    DownloadsWeekly Downloads

    411

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    47.7 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar