https://github.com/mzusin/react-round-slider
An accessible and mobile-friendly React Round Slider library, powered by TypeScript and SVG.
https://github.com/mzusin/react-round-slider
circle-slider circular circular-slider radial-slider range-slider react-circle-slider react-circular-slider react-radial-slider react-range-slider react-range-slider-component react-round-slider round-slider slider
Last synced: 11 months ago
JSON representation
An accessible and mobile-friendly React Round Slider library, powered by TypeScript and SVG.
- Host: GitHub
- URL: https://github.com/mzusin/react-round-slider
- Owner: mzusin
- License: mit
- Created: 2023-04-29T17:56:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-10T15:36:06.000Z (over 2 years ago)
- Last Synced: 2024-11-30T05:37:58.409Z (over 1 year ago)
- Topics: circle-slider, circular, circular-slider, radial-slider, range-slider, react-circle-slider, react-circular-slider, react-radial-slider, react-range-slider, react-range-slider-component, react-round-slider, round-slider, slider
- Language: TypeScript
- Homepage: https://react-round-slider.mzsoft.org/
- Size: 41.9 MB
- Stars: 15
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Round Slider
Experience an accessible and mobile-friendly React Round Slider library,
powered by TypeScript and SVG.
## Features
- Any number of pointers 🔵 🟣 🟡
- Mobile Ready 📱
- Accessibility
- Optional ticks/marks
- ES6 JavaScript & Typescript ✔
- Styles & Design options ☀️
- Range slider
- Numbers, text, ot range
- Range dragging
- Touch support
- Keyboard support ⌨️
- Mousewheel support 🐭
- Disabled/enabled, including keyboard and mousewheel
- Possibility to disable only one pointer
- Optional animation on panel click
- Works well with Bootstrap and other CSS frameworks
- Supports two (and more) pointers overlap
- MIT license 🎁
## Documentation 🔖
### Getting Started
- [Basic Usage](https://react-round-slider.mzsoft.org/pages/basic-usage.html)
- [Pointer Settings](https://react-round-slider.mzsoft.org/pages/pointer-settings.html)
- [Individual Pointer Settings](https://react-round-slider.mzsoft.org/pages/individual-pointer-settings.html)
- [Path Settings](https://react-round-slider.mzsoft.org/pages/path-settings.html)
- [Data Settings](https://react-round-slider.mzsoft.org/pages/data-settings.html)
- [Values List](https://react-round-slider.mzsoft.org/pages/values-list.html)
- [Connection](https://react-round-slider.mzsoft.org/pages/connection.html)
- [Text Values](https://react-round-slider.mzsoft.org/pages/text-values.html)
### Ticks
- [Ticks Settings](https://react-round-slider.mzsoft.org/pages/ticks-settings.html)
- [Ticks Values](https://react-round-slider.mzsoft.org/pages/ticks-values.html)
### Other
- [Animation](https://react-round-slider.mzsoft.org/pages/animation.html)
- [Disabled State](https://react-round-slider.mzsoft.org/pages/disabled-state.html)
- [Circle Gradient](https://react-round-slider.mzsoft.org/pages/circle-gradient.html)
- [Pointer & Connection Gradient](https://react-round-slider.mzsoft.org/pages/pointer-and-connection-gradient.html)
- [Pointers Overlap](https://react-round-slider.mzsoft.org/pages/pointers-overlap.html)
- [Custom Pointer Shape](https://react-round-slider.mzsoft.org/pages/custom-pointer-shape.html)
- [Range Dragging](https://react-round-slider.mzsoft.org/pages/range-dragging.html)
------------------------------
## License
[MIT license](https://github.com/mzusin/mz-react-input-number/blob/main/LICENSE)
It can be used **for free** in any personal or commercial project :gift: