A <VerticalSlider> component for react-native projects was initially cloned from rn-vertical-slider 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.

✨Features

📝 Completely written in Typescript
🔗 No Native linking required

Example1 Example2

🏁 Getting Started

To add this slider to your project :

npm install react-native-vertical-slider-smartlife

🎨 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

credits

sacmii