{"id":30805381,"url":"https://github.com/simformsolutionspvtltd/react-native-radial-slider","last_synced_at":"2025-09-06T00:56:47.538Z","repository":{"id":38617505,"uuid":"487755317","full_name":"SimformSolutionsPvtLtd/react-native-radial-slider","owner":"SimformSolutionsPvtLtd","description":"React Native component to select or highlight a specific value from a range of values 👌 ✨","archived":false,"fork":false,"pushed_at":"2024-02-21T05:46:05.000Z","size":15521,"stargazers_count":157,"open_issues_count":6,"forks_count":19,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-08-31T17:33:36.048Z","etag":null,"topics":["arc-slider","circle-slider","meter","radial","radial-slider","react","react-native","round-slider","slider","speedometer","typescript"],"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/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-02T07:31:51.000Z","updated_at":"2025-07-22T06:39:44.000Z","dependencies_parsed_at":"2024-01-09T11:27:58.793Z","dependency_job_id":"643af347-880d-4892-9efd-387ea408d292","html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/SimformSolutionsPvtLtd/react-native-radial-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-radial-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-radial-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-radial-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-radial-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-radial-slider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-radial-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273842836,"owners_count":25177921,"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","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["arc-slider","circle-slider","meter","radial","radial-slider","react","react-native","round-slider","slider","speedometer","typescript"],"created_at":"2025-09-06T00:56:45.471Z","updated_at":"2025-09-06T00:56:47.525Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Radial Slider - Simform](./assets/banner.png)\n\n# react-native-radial-slider\n\n[![react-native-radial-slider on npm](https://img.shields.io/npm/v/react-native-radial-slider.svg?style=flat)](https://www.npmjs.com/package/react-native-radial-slider) [![react-native-radial-slider downloads](https://img.shields.io/npm/dm/react-native-radial-slider)](https://www.npmtrends.com/react-native-radial-slider) [![react-native-radial-slider install size](https://packagephobia.com/badge?p=react-native-radial-slider)](https://packagephobia.com/result?p=react-native-radial-slider) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\n\n---\n\nThis is a pure javascript and react-native-svg based library that provides many variants of `Radial Slider` and `Speedo Meter` including `default`, `radial-circle-slider`, `speedometer` and `speedometer-marker`\n\nRadial Slider allows you to select any specific value from a range of values. It comes with two variants, one is default which allows selection on a 180-degree arc and the second one is 360-degree which allows selection of values on a complete circle. It can be used to select/set goals, vision, range, etc.\n\nThe Speedo Meter allows you to highlight a specific value from a range of values. It comes with two variants, the default one shows a needle and another one shows marking values with a needle. It can be used to display the speed of the internet, vehicle, fan, etc.\n\nThis library is easy to use and provides you complete customization, so you can customize components based on your need.\n\n## 🎬 Preview\n\n| RadialSlider                                          | SpeedoMeter                                         |\n| ----------------------------------------------------- | --------------------------------------------------- |\n| ![alt RadialSlider](./assets/RadialSliderExample.gif) | ![alt SpeedoMeter](./assets/SpeedoMeterExample.gif) |\n\n---\n\n## Quick Access\n\n[Installation](#installation) | [RadialSlider](#radialslider) | [SpeedoMeter](#speedometer) | [Properties](#properties) | [Example](#example) | [License](#license)\n\n## Installation\n\n##### 1. Install library and react-native-svg\n\n```bash\n$ npm install react-native-radial-slider react-native-svg\n# --- or ---\n$ yarn add react-native-radial-slider react-native-svg\n```\n\n##### 2. Install cocoapods in the ios project\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n##### Know more about [react-native-svg](https://www.npmjs.com/package/react-native-svg)\n\n# RadialSlider\n\n- RadialSlider has two different variants, 'default' and 'radial-circle-slider'\n- RadialSlider can be used to select / set goal, vision, range etc\n\n## Default RadialSlider\n\n#### 🎬 Preview\n\n---\n\n![Default RadialSlider](./assets/RadialSlider.gif)\n\n#### Usage\n\n---\n\n```jsx\nimport React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { RadialSlider } from 'react-native-radial-slider';\n\nconst RadialVariant = () =\u003e {\n  const [speed, setSpeed] = useState(0);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cRadialSlider value={speed} min={0} max={200} onChange={setSpeed} /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n\nexport default RadialVariant;\n```\n\n## Radial Circle Slider\n\n#### 🎬 Preview\n\n---\n\n![Default RadialCircleSlider](./assets/RadialCircle.gif)\n\n#### Usage\n\n---\n\n```jsx\nimport React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { RadialSlider } from 'react-native-radial-slider';\n\nconst RadialVariant = () =\u003e {\n  const [speed, setSpeed] = useState(0);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cRadialSlider\n        variant={'radial-circle-slider'}\n        value={speed}\n        min={0}\n        max={200}\n        onChange={setSpeed}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n\nexport default RadialVariant;\n```\n\n# SpeedoMeter\n\n\u003e The speedometer will not take user inputs, when we need to update dynamic values at that time we can use it\n\n- SpeedoMeter has two different variants, speedometer and speedometer-marker\n- SpeedoMeter can be used to display the speed of an internet, vehicle, fan etc\n\n## SpeedoMeter\n\n#### 🎬 Preview\n\n---\n\n![Default SpeedoMeter](./assets/SpeedoMeter.gif)\n\n#### Usage\n\n---\n\n```jsx\nimport React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { RadialSlider } from 'react-native-radial-slider';\n\nconst SpeedoMeterVariant = () =\u003e {\n  const [speed, setSpeed] = useState(0);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cRadialSlider\n        variant={'speedometer'}\n        value={speed}\n        min={0}\n        max={200}\n        onChange={setSpeed}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n\nexport default SpeedoMeterVariant;\n```\n\n## SpeedoMeter Marker\n\n#### 🎬 Preview\n\n---\n\n![Default SpeedoMeterMarker](./assets/SpeedoMeterMarker.gif)\n\n#### Usage\n\n---\n\n```jsx\nimport React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { RadialSlider } from 'react-native-radial-slider';\n\nconst SpeedoMeterVariant = () =\u003e {\n  const [speed, setSpeed] = useState(0);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cRadialSlider\n        variant={'speedometer-marker'}\n        value={speed}\n        min={0}\n        max={200}\n        onChange={setSpeed}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n\nexport default SpeedoMeterVariant;\n```\n\n---\n\n## Properties\n\n| Prop                  | Default                                                                    | Type           | Description                                                                              | RadialSlider | SpeedoMeter |\n| :-------------------- | :------------------------------------------------------------------------- | :------------- | :--------------------------------------------------------------------------------------- | ------------ | ----------- |\n| **min\\***             | 0                                                                          | number         | Minimum value                                                                            | ✅           | ✅          |\n| **max\\***             | 100                                                                        | number         | Maximum value                                                                            | ✅           | ✅          |\n| **value\\***           | 0                                                                          | number         | Show selection upto this value                                                           | ✅           | ✅          |\n| **onChange\\***        | -                                                                          | function       | Callback function that invokes on change in track                                        | ✅           | ✅          |\n| radius                | 100                                                                        | number         | Size of component                                                                        | ✅           | ✅          |\n| startAngle            | 270                                                                        | number [1-360] | The angle at which the circular slider should start from.                                | ✅           | ❌          |\n| step                  | 1                                                                          | number         | Step value for component                                                                 | ✅           | ❌          |\n| markerValue           | -                                                                          | number         | Show marker on specific number                                                           | ✅           | ✅          |\n| title                 | -                                                                          | string         | Title for component                                                                      | ✅           | ❌          |\n| subTitle              | Goal                                                                       | string         | Subtitle for component                                                                   | ✅           | ❌          |\n| unit                  | RadialSlider: 'kCal', SpeedoMeter: 'MB/S'                                  | string         | Unit for component                                                                       | ✅           | ✅          |\n| thumbRadius           | 18                                                                         | number         | Radius for thumb                                                                         | ✅           | ❌          |\n| thumbColor            | #008ABC                                                                    | string         | Color for thumb                                                                          | ✅           | ❌          |\n| thumbBorderWidth      | 5                                                                          | number         | Width for thumb                                                                          | ✅           | ❌          |\n| thumbBorderColor      | #FFFFFF                                                                    | string         | Border Color for thumb                                                                   | ✅           | ❌          |\n| markerLineSize        | 50                                                                         | number         | Size of marker line                                                                      | ✅           | ✅          |\n| sliderWidth           | 18                                                                         | number         | Width of slider                                                                          | ✅           | ✅          |\n| sliderTrackColor      | #E5E5E5                                                                    | string         | Color of unselected slider track                                                         | ✅           | ✅          |\n| lineColor             | #E5E5E5                                                                    | string         | Color of unselected lines                                                                | ✅           | ✅          |\n| lineSpace             | 3                                                                          | number         | Space between each line                                                                  | ✅           | ✅          |\n| linearGradient        | [ { offset: '0%', color:'#ffaca6' }, { offset: '100%', color: '#EA4800' }] | object         | Gradient color of selected track                                                         | ✅           | ✅          |\n| onComplete            | -                                                                          | function       | Callback function which defines what to do after completion                              | ✅           | ✅          |\n| centerContentStyle    | {}                                                                         | object         | Center content style                                                                     | ✅           | ❌          |\n| titleStyle            | {}                                                                         | object         | Status title container style                                                             | ✅           | ❌          |\n| subTitleStyle         | {}                                                                         | object         | Status subtitle text style                                                               | ✅           | ❌          |\n| valueStyle            | {}                                                                         | object         | Center value style                                                                       | ✅           | ✅          |\n| buttonContainerStyle  | {}                                                                         | object         | Button container style                                                                   | ✅           | ❌          |\n| leftIconStyle         | {}                                                                         | object         | Left Icon style                                                                          | ✅           | ❌          |\n| rightIconStyle        | {}                                                                         | object         | Right Icon style                                                                         | ✅           | ❌          |\n| contentStyle          | {}                                                                         | object         | Whole content style                                                                      | ✅           | ✅          |\n| unitStyle             | {}                                                                         | object         | Unit text style                                                                          | ✅           | ✅          |\n| style                 | {}                                                                         | object         | Inner container style                                                                    | ✅           | ✅          |\n| openingRadian         | RadialSlider: Math.PI / 3 , SpeedoMeter:0.057                              | number         | Radian of component                                                                      | ✅           | ✅          |\n| disabled              | false                                                                      | boolean        | If true, buttons will be in disabled state                                               | ✅           | ❌          |\n| isHideSlider          | false                                                                      | boolean        | If true, slider will be hidden                                                           | ✅           | ✅          |\n| isHideCenterContent   | false                                                                      | boolean        | If true, center content will be hidden                                                   | ✅           | ✅          |\n| isHideTitle           | false                                                                      | boolean        | If true, title will be hidden                                                            | ✅           | ❌          |\n| isHideSubtitle        | false                                                                      | boolean        | If true, subtitle will be hidden                                                         | ✅           | ❌          |\n| isHideValue           | false                                                                      | boolean        | If true, value will be hidden                                                            | ✅           | ✅          |\n| isHideTailText        | false                                                                      | boolean        | If true, tail text will be hidden                                                        | ✅           | ✅          |\n| isHideButtons         | false                                                                      | boolean        | If true, buttons will be hidden                                                          | ✅           | ❌          |\n| isHideLines           | false                                                                      | boolean        | If true,slider lines will be hidden                                                      | ✅           | ✅          |\n| isHideMarkerLine      | false                                                                      | boolean        | If true, marked lines will be hidden                                                     | ✅           | ✅          |\n| fixedMarker           | false                                                                      | boolean        | If true, marked value will be hidden                                                     | ✅           | ✅          |\n| variant               | default                                                                    | string         | Different component variants `radial-circle-slider`, `speedometer`, `speedometer-marker` | ✅           | ✅          |\n| onPress               | {}                                                                         | function       | Based on click value will be increased or decreased                                      | ✅           | ❌          |\n| stroke                | '#008ABC'                                                                  | string         | Color for button icon                                                                    | ✅           | ❌          |\n| unitValueContentStyle | {}                                                                         | object         | Unit value content style                                                                 | ❌           | ✅          |\n| markerCircleSize      | 15                                                                         | number         | Size for marker circle                                                                   | ❌           | ✅          |\n| markerCircleColor     | #E5E5E5                                                                    | string         | Color for marker circle                                                                  | ❌           | ✅          |\n| markerPositionY       | 20                                                                         | number         | Marker position for up and down                                                          | ❌           | ✅          |\n| markerPositionX       | 20                                                                         | number         | Marker position for right and left                                                       | ❌           | ✅          |\n| needleBackgroundColor | #A020F0                                                                    | string         | Background color for needle                                                              | ❌           | ✅          |\n| needleColor           | #175BAD                                                                    | string         | Color for needle                                                                         | ❌           | ✅          |\n| needleBorderWidth     | 1.5                                                                        | number         | Width of needle border                                                                   | ❌           | ✅          |\n| needleHeight          | 30                                                                         | number         | Height of needle                                                                         | ❌           | ✅          |\n| markerValueInterval   | 10                                                                         | number         | Show number of value in sequence                                                         | ❌           | ✅          |\n| markerValueColor      | #333333                                                                    | string         | Color for marker value                                                                   | ❌           | ✅          |\n| strokeLinecap         | butt                                                                       | string         | Line terminations, can be butt, line, or square                                          | ❌           | ✅          |\n\n---\n\n## Example\n\nA full working example project is here [Example](./example/src/App.tsx)\n\n```sh\nyarn\nyarn example ios   // For ios\nyarn example android   // For Android\n```\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider/stargazers) for this repository.⭐\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider/issues)\n\n## License\n\n- [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-radial-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-radial-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-radial-slider/lists"}