# 🕹️ react-circle-slider-hooked

Circle Slider Component for React.js

![Imgur](https://i.imgur.com/4RdYfaL.gif)

## ⚡ 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

## 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.<br>
Open [http://localhost:1234](http://localhost:1234) to view it in the browser.

### `npm run dev`

Run linter

### `npm run lint`

Start tests followed by jest

### `npm test`

## Usage

```jsx
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   | 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

## License

MIT