rn-vertical-slider-gradient

A vertical Slider for React Native written entirely in javascript that support linear gradient

Getting Started

• To add this slider to your project :

$ npm install rn-vertical-slider-gradient

Dependencies

• Requires react-native-linear-gradient

Usage

• A basic example of slider

<VerticalSlider
          value={180}
          disabled={false}
          min={0}
          max={200}
          onChange={(value: number) => {
            // console.log("CHANGE", value);
          }}
          onComplete={(value: number) => {
            // console.log("COMPLETE", value);
          }}
          width={50}
          height={300}
          step={1}
          borderRadius={5}
          minimumTrackTintColor={[
            "#2ecc71",
            "#27ae60",
            "#f1c40f",
            "#f39c12",
            "#d35400",
            "#c0392b"
          ]}
          maximumTrackTintColor="#ecf0f1"
          showBallIndicator
          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.
step	number	0	This value describes number of stepsto skip.
minimumTrackTintColor	Array	['#00000']	Array of colors must be supplied to minimumTrackTintColor.
maximumTrackTintColor	string	'#eee'	The top color.
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).
borderRadius	number	0	The border radius of component.
width	number	0	Width of the slider.
height	number	0	Height of the slider.
showBallIndicator	bool	false	To show or hide indicator.
ballIndicatorColor	string	null	Background color for Indicator. If none supplied then colors from minimumTrackTintColor are taken.
ballIndicatorWidth	number	48	Diameter of Indicator.
ballIndicatorPosition	number	-50	Horizontal position of Indicator with respect to current selected value.
ballIndicatorTextColor	string	'#fff'	Indicator text color.

License

This project is licensed under the MIT License - see the LICENSE.md file for details