Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/razorrun/react-native-vertical-slider-smartlife
A vertical Slider for React Native written entirely in javascript.
https://github.com/razorrun/react-native-vertical-slider-smartlife
android ios react-native slider
Last synced: 2 days ago
JSON representation
A vertical Slider for React Native written entirely in javascript.
- Host: GitHub
- URL: https://github.com/razorrun/react-native-vertical-slider-smartlife
- Owner: razorRun
- License: mit
- Created: 2020-09-21T21:12:40.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-21T23:16:34.000Z (about 4 years ago)
- Last Synced: 2024-01-04T17:22:46.418Z (10 months ago)
- Topics: android, ios, react-native, slider
- Language: TypeScript
- Homepage: https://roshan.digital/
- Size: 1.72 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
A `` 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.
# 🆕 React Native Vertical Slider
#### **(react-native-vertical-slider-smartlife)**
###### 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).
## ✨Features
- 📝 Completely written in Typescript
- 🔗 No Native linking required
 
## 🏁 Getting Started
- To add this slider to your project :
```
npm install react-native-vertical-slider-smartlife
```
## 🎨 Usage
- A basic example of slider
```
{
console.log("CHANGE", value);
}}
onComplete={(value: number) => {
console.log("COMPLETE", value);
}}
width={50}
height={300}
step={1}
borderRadius={5}
minimumTrackTintColor={"gray"}
maximumTrackTintColor={"tomato"}
showBallIndicator
ballIndicatorColor={"gray"}
ballIndicatorTextColor={"white"}
/>
```
## 🎛 Props
| Property | Type | Default | Description |
| :--------------------- | :------- | :-------- | :-------------------------------------------------------------------------------------------- |
| value | number | 0 | Value of the slider. |
| disabled | bool | false | Enable or disable slider. |
| min | number | 0 | Minimum value for slider. |
| max | number | 0 | Maximum value for slider. |
| onChange | function | null | Callback continuously called while the user is dragging the slider. |
| onComplete | function | null | Callback called when the user finishes changing the value (e.g. when the slider is released). |
| width | number | 0 | Width of the slider. |
| height | number | 0 | Height of the slider. |
| borderRadius | number | 0 | The border radius of component. |
| maximumTrackTintColor | string | '#eee' | The top color. |
| minimumTrackTintColor | string | '#fff' | The bottom color. |
| showBallIndicator | bool | false | To show or hide indicator. |
| step | number | 0 | This value describes number of steps to skip. |
| ballIndicatorColor | string | '#fff' | Background color for Indicator |
| ballIndicatorWidth | number | 48 | Diameter of Indicator. [Height of Indicator : If renderIndicator present] |
| ballIndicatorHeight | number | 48 | Diameter of Indicator. [Width of Indicator : If renderIndicator present] |
| ballIndicatorPosition | number | -50 | Horizontal position of Indicator with respect to current selected value. |
| ballIndicatorTextColor | string | '#fff' | Indicator text color. |
| animationDuration | number | 0 | Animation Duration |
| showBackgroundShadow | boolean | 0 | Display shadow on Indicator (If available) and Slider |
| shadowProps | object | see below | Shadow Configuration for Slider |
| renderIndicator | boolean | 0 | Render a custom slider indicator |
- #### shadowProps
shadowProps define the shadow properties for slider (Indicator Component if shown)
Default Props :
```
{
shadowOffsetWidth = 0,
shadowOffsetHeight = 1,
shadowOpacity = 0.22,
shadowRadius = 2.22,
elevation = 3,
shadowColor = '#000',
}
```
- #### renderIndicator
renderIndicator is used when you want to use custom indicator for the slider. _ballIndicatorHeight_, _ballIndicatorWidth_ will define the height and width of the component.
- ##### Custom renderIndicator
## 📌 Extras
- _[Gradient Slider](https://github.com/sacmii/rn-vertical-slider-gradient)_ Slider with linear gradient
- **Github** ★'s are more additcting than Coffee 🤩
## ☀️ License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## 🚧 Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
### credits
sacmii