rn-vertical-slider-matyno
v1.0.1
Published
A vertical Slider for React Native written entirely in javascript. Forked and fixed from https://github.com/sacmii/rn-vertical-slider.git
Downloads
16
Maintainers
Readme
🆕 React Native Vertical Slider 🎚
(rn-vertical-slider)
✨Features
- 📝 Completely written in Typescript
- 🔗 No Native linking required
🏁 Getting Started
- To add this slider to your project :
npm install npm i rn-vertical-slider-matyno
🎨 Usage
- A basic example of slider
<VerticalSlider
value={1}
disabled={false}
min={0}
max={100}
onChange={(value: number) => {
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 Slider with linear gradient
- Github ★'s are more additcting than Coffee 🤩
☀️ License
This project is licensed under the MIT License - see the LICENSE.md file for details
🚧 Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT