{"id":19070477,"url":"https://github.com/dmitrymorozoff/react-circle-slider","last_synced_at":"2025-04-15T11:24:10.934Z","repository":{"id":57333004,"uuid":"115267133","full_name":"dmitrymorozoff/react-circle-slider","owner":"dmitrymorozoff","description":"🕹️ Circle Slider Component for React","archived":false,"fork":false,"pushed_at":"2019-10-21T14:02:49.000Z","size":1413,"stargazers_count":56,"open_issues_count":13,"forks_count":20,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T19:21:23.482Z","etag":null,"topics":["circle-slider","circular-slider","javascript","react","react-component","react-components","slider","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmitrymorozoff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-24T14:12:59.000Z","updated_at":"2024-07-01T18:41:49.000Z","dependencies_parsed_at":"2022-08-26T03:11:28.580Z","dependency_job_id":null,"html_url":"https://github.com/dmitrymorozoff/react-circle-slider","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-circle-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-circle-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-circle-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-circle-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitrymorozoff","download_url":"https://codeload.github.com/dmitrymorozoff/react-circle-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249059292,"owners_count":21206127,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["circle-slider","circular-slider","javascript","react","react-component","react-components","slider","ui"],"created_at":"2024-11-09T01:18:53.897Z","updated_at":"2025-04-15T11:24:10.916Z","avatar_url":"https://github.com/dmitrymorozoff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🕹️ react-circle-slider\n\nCircle Slider Component for React.js\n\n![Imgur](https://i.imgur.com/4RdYfaL.gif)\n\n## ⚡ Functionality\n\n-   Simple to use\n-   No extra dependencies\n-   Highly customizable\n-   Defining min and max values\n-   Defining step size\n-   Defining gradient color\n-   Touch support\n-   Tooltip support\n-   Style based: no images / SVGs\n\n## Examples\n\n-   To check out live examples visit https://dmitrymorozoff.github.io/react-circle-slider/\n\n## 🚀 Getting started\n\nInstall `react-circle-slider` using npm.\n\n### `npm install --save react-circle-slider`\n\n\nYou can also test the components locally by cloning this repo and doing the following steps:\n\n## 🔲 NPM-scripts\n\nInstall dependencies from package.json:\n\n### `npm install`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:1234](http://localhost:1234) to view it in the browser.\n\n### `npm run dev`\n\nRun linter\n\n### `npm run lint`\n\nStart tests followed by jest\n\n### `npm run test`\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { CircleSlider } from \"react-circle-slider\";\n\nexport class App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { value: 0 };\n    }\n\n    handleChange = value =\u003e {\n        console.log(`Changed value ${value}`);\n        this.setState({ value });\n    };\n\n    handleChangeRange = event =\u003e {\n        this.setState({\n            value: event.target.valueAsNumber,\n        });\n    };\n\n    render() {\n        const { value } = this.state;\n        return (\n            \u003cCircleSlider value={value} onChange={this.handleChange} /\u003e\n        );\n    }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## 📃 Props\n\n| Props             | Type     | Default   | Description                                                    |\n| ----------------- | :------- | --------- | -------------------------------------------------------------- |\n| size              | Number   | 180       | size of the slider in px                                       |\n| stepSize          | Number   | 1         | value to be added or subtracted on each step the slider makes. |\n| knobRadius        | Number   | null      | knob radius in px                                              |\n| circleWidth       | Number   | null      | width of circle in px                                          |\n| progressWidth     | Number   | null      | progress curve width in px                                     |\n| min               | Number   | 0         | the minimum value of the slider                                |\n| max               | Number   | 100       | the maximum value of the slider                                |\n| value             | Number   | 0         | value                                                          |\n| circleColor       | String   | `#e9eaee` | color of slider                                                |\n| progressColor     | String   | `#007aff` | color of progress curve                                        |\n| gradientColorFrom | String   | NOOP      | start gradient color of progress curve                         |\n| gradientColorTo   | String   | NOOP      | end gradient color progress curve                              |\n| knobColor         | String   | `#fff`    | color of knob                                                  |\n| disabled          | Boolean  | false     | disabled status                                                |\n| shadow            | Boolean  | true      | shadow on knob                                                 |\n| showTooltip       | Boolean  | false     | tooltip                                                        |\n| showPercentage    | Boolean  | false     | percentage on tooltip                                          |\n| tooltipSize       | Number   | 32        | size of tooltip                                                |\n| tooltipColor      | String   | `#333`    | color of tooltip                                               |\n| onChange          | Function | NOOP      | when slider is moved, `onChange` is triggered.                 |\n\n## 💡 Todo\n\n- [ ] Keyboard support\n- [ ] Mouse scroll support\n- [ ] Accessibility \n\n## 💻 Contributing\n\n- For bugs and feature requests, please create an issue\n- Lint and test your code\n- Pull requests and ⭐ stars are always welcome\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrymorozoff%2Freact-circle-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitrymorozoff%2Freact-circle-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrymorozoff%2Freact-circle-slider/lists"}