rcs

react-circle-slider-temperature

🕹️ Circle Slider Component for React

Showing:

Popularity

Downloads/wk

10

GitHub Stars

50

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

2

Size (min+gzip)

5.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial