{"id":19928087,"url":"https://github.com/razorrun/react-native-vertical-slider-smartlife","last_synced_at":"2025-05-03T10:31:00.112Z","repository":{"id":57341226,"uuid":"297462458","full_name":"razorRun/react-native-vertical-slider-smartlife","owner":"razorRun","description":"A vertical Slider for React Native written entirely in javascript.","archived":false,"fork":false,"pushed_at":"2020-09-21T23:16:34.000Z","size":1803,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T15:58:39.050Z","etag":null,"topics":["android","ios","react-native","slider"],"latest_commit_sha":null,"homepage":"https://roshan.digital/","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/razorRun.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}},"created_at":"2020-09-21T21:12:40.000Z","updated_at":"2024-07-31T03:59:08.000Z","dependencies_parsed_at":"2022-09-04T14:41:39.404Z","dependency_job_id":null,"html_url":"https://github.com/razorRun/react-native-vertical-slider-smartlife","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vertical-slider-smartlife","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vertical-slider-smartlife/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vertical-slider-smartlife/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vertical-slider-smartlife/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/razorRun","download_url":"https://codeload.github.com/razorRun/react-native-vertical-slider-smartlife/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252178601,"owners_count":21707028,"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":["android","ios","react-native","slider"],"created_at":"2024-11-12T22:36:13.975Z","updated_at":"2025-05-03T10:30:59.772Z","avatar_url":"https://github.com/razorRun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A `\u003cVerticalSlider\u003e` component for react-native projects was initially cloned from [`rn-vertical-slider`](https://github.com/sacmii/rn-vertical-slider#readme) And been actively maintaining it as we wanted to avoid any future changes to original repo that effects our existing applications. \n\n# 🆕 React Native Vertical Slider\n\n#### **(react-native-vertical-slider-smartlife)**\n\n###### A vertical Slider for React Native written entirely in javascript. Support this project with a ★ on [**Github**](https://github.com/razorRun/react-native-vertical-slider-smartlife).\n\n## ✨Features\n\n- 📝 Completely written in Typescript\n- 🔗 No Native linking required\n\n![Example1](https://user-images.githubusercontent.com/12546974/82729464-63a73d00-9d15-11ea-99dc-e432e61d8398.gif) ![Example2](https://user-images.githubusercontent.com/12546974/82730380-b0dadd00-9d1c-11ea-889d-03249c6b5f76.gif)\n\n## 🏁 Getting Started\n\n- To add this slider to your project :\n\n```\nnpm install react-native-vertical-slider-smartlife\n```\n\n## 🎨 Usage\n\n- A basic example of slider\n\n```\n\u003cVerticalSlider\n          value={1}\n          disabled={false}\n          min={0}\n          max={100}\n          onChange={(value: number) =\u003e {\n            console.log(\"CHANGE\", value);\n          }}\n          onComplete={(value: number) =\u003e {\n            console.log(\"COMPLETE\", value);\n          }}\n          width={50}\n          height={300}\n          step={1}\n          borderRadius={5}\n          minimumTrackTintColor={\"gray\"}\n          maximumTrackTintColor={\"tomato\"}\n          showBallIndicator\n          ballIndicatorColor={\"gray\"}\n          ballIndicatorTextColor={\"white\"}\n        /\u003e\n```\n\n## 🎛 Props\n\n| Property               | Type     | Default   | Description                                                                                   |\n| :--------------------- | :------- | :-------- | :-------------------------------------------------------------------------------------------- |\n| value                  | number   | 0         | Value of the slider.                                                                          |\n| disabled               | bool     | false     | Enable or disable slider.                                                                     |\n| min                    | number   | 0         | Minimum value for slider.                                                                     |\n| max                    | number   | 0         | Maximum value for slider.                                                                     |\n| onChange               | function | null      | Callback continuously called while the user is dragging the slider.                           |\n| onComplete             | function | null      | Callback called when the user finishes changing the value (e.g. when the slider is released). |\n| width                  | number   | 0         | Width of the slider.                                                                          |\n| height                 | number   | 0         | Height of the slider.                                                                         |\n| borderRadius           | number   | 0         | The border radius of component.                                                               |\n| maximumTrackTintColor  | string   | '#eee'    | The top color.                                                                                |\n| minimumTrackTintColor  | string   | '#fff'    | The bottom color.                                                                             |\n| showBallIndicator      | bool     | false     | To show or hide indicator.                                                                    |\n| step                   | number   | 0         | This value describes number of steps to skip.                                                 |\n| ballIndicatorColor     | string   | '#fff'    | Background color for Indicator                                                                |\n| ballIndicatorWidth     | number   | 48        | Diameter of Indicator. [Height of Indicator : If renderIndicator present]                     |\n| ballIndicatorHeight    | number   | 48        | Diameter of Indicator. [Width of Indicator : If renderIndicator present]                      |\n| ballIndicatorPosition  | number   | -50       | Horizontal position of Indicator with respect to current selected value.                      |\n| ballIndicatorTextColor | string   | '#fff'    | Indicator text color.                                                                         |\n| animationDuration      | number   | 0         | Animation Duration                                                                            |\n| showBackgroundShadow   | boolean  | 0         | Display shadow on Indicator (If available) and Slider                                         |\n| shadowProps            | object   | see below | Shadow Configuration for Slider                                                               |\n| renderIndicator        | boolean  | 0         | Render a custom slider indicator                                                              |\n\n- #### shadowProps\n\nshadowProps define the shadow properties for slider (Indicator Component if shown)\nDefault Props :\n\n```\n  {\n      shadowOffsetWidth = 0,\n      shadowOffsetHeight = 1,\n      shadowOpacity = 0.22,\n      shadowRadius = 2.22,\n      elevation = 3,\n      shadowColor = '#000',\n }\n```\n\n- #### renderIndicator\n\nrenderIndicator is used when you want to use custom indicator for the slider. _ballIndicatorHeight_, _ballIndicatorWidth_ will define the height and width of the component.\n\n- ##### Custom renderIndicator\n\n  ![Custom Indicator](https://user-images.githubusercontent.com/12546974/82730062-89831080-9d1a-11ea-8f41-b37d02b79a69.gif)\n\n## 📌 Extras\n\n- _[Gradient Slider](https://github.com/sacmii/rn-vertical-slider-gradient)_ Slider with linear gradient\n- **Github** ★'s are more additcting than Coffee 🤩\n\n## ☀️ License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## 🚧 Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n### credits\nsacmii\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazorrun%2Freact-native-vertical-slider-smartlife","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frazorrun%2Freact-native-vertical-slider-smartlife","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazorrun%2Freact-native-vertical-slider-smartlife/lists"}