React-native-vertical-slider-component NPM

🆕 React Native Vertical Slider Component 🎚

(react-native-vertical-slider-component)

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-component

🎨 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.