Skip to content

Latest commit

 

History

History
72 lines (65 loc) · 2.6 KB

README.md

File metadata and controls

72 lines (65 loc) · 2.6 KB
Raw

[Deprecated]

rn-vertical-slider-gradient

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

Getting Started

Example1 Example2

  • To add this slider to your project :
$ npm install rn-vertical-slider-gradient

Dependencies

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