Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitrymorozoff/react-circle-slider
đšī¸ Circle Slider Component for React
https://github.com/dmitrymorozoff/react-circle-slider
circle-slider circular-slider javascript react react-component react-components slider ui
Last synced: 2 months ago
JSON representation
đšī¸ Circle Slider Component for React
- Host: GitHub
- URL: https://github.com/dmitrymorozoff/react-circle-slider
- Owner: dmitrymorozoff
- License: mit
- Created: 2017-12-24T14:12:59.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-10-21T14:02:49.000Z (over 5 years ago)
- Last Synced: 2024-11-09T01:19:19.582Z (3 months ago)
- Topics: circle-slider, circular-slider, javascript, react, react-component, react-components, slider, ui
- Language: TypeScript
- Homepage:
- Size: 1.35 MB
- Stars: 56
- Watchers: 3
- Forks: 20
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# đšī¸ 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
- 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](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
```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 (
);
}
}
ReactDOM.render(, 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