Natively Pronounced Mandarin
    Wondering what’s next for npm?Check out our public roadmap! »

    react-native-vertical-slider-smartlife
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    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

      Custom Indicator

    📌 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

    Install

    npm i react-native-vertical-slider-smartlife

    DownloadsWeekly Downloads

    61

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar