New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-circle-slider

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-circle-slider

Circle Slider UI component for React

  • 1.6.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
698
decreased by-32.17%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • 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

PropsTypeDefaultDescription
sizeNumber180size of the slider in px
stepSizeNumber1value to be added or subtracted on each step the slider makes.
knobRadiusNumbernullknob radius in px
circleWidthNumbernullwidth of circle in px
progressWidthNumbernullprogress curve width in px
minNumber0the minimum value of the slider
maxNumber100the maximum value of the slider
valueNumber0value
circleColorString#e9eaeecolor of slider
progressColorString#007affcolor of progress curve
gradientColorFromStringNOOPstart gradient color of progress curve
gradientColorToStringNOOPend gradient color progress curve
knobColorString#fffcolor of knob
disabledBooleanfalsedisabled status
shadowBooleantrueshadow on knob
showTooltipBooleanfalsetooltip
showPercentageBooleanfalsepercentage on tooltip
tooltipSizeNumber32size of tooltip
tooltipColorString#333color of tooltip
onChangeFunctionNOOPwhen 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

Keywords

FAQs

Package last updated on 01 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc