React-native-slider: Vertical Slider

[CHaNGeTe]

Describe the Feature

Same slider but for vertical orientation
Is it supported?

[michalchudziak]

You can probably rotate view with your styles tho.

<Slider style={{ transform: [{ rotate: '90deg' }] }} />

Let me know if it doesn't work, I'll be glad to reopen that.

[blakeperdue]

@CHaNGeTe did you have any luck? I tried this but the sliding on Android is odd ... it's hard to get it to move and when it does it often moves in the opposite direction of the gesture.

[CHaNGeTe]

Nope, I am considering using https://www.npmjs.com/package/rn-vertical-slider for the vertical one

[joshuapinter]

We got it working with:

transform: [ { rotate: "-90deg" } ]

Note the _negative_ 90 degrees. That helps slide things up and down in the correct direction.

[dhruvalpatel18]

I want multiple vertical sliders side by side with steps. Also, want to change the thumb with a different image. Using this library, if you rotate the slider, it keeps the width and height size same as before and so it doesn't work if you want multiple sliders in a row. Please provide any solution.

[smartcris]

Meanwhile there is a nice tutorial here to make a vertical slider.

[YajanaRao]

I am not able to set height and width of slider. It is still behaving as horizontal slider in styles

[YajanaRao]

Link to snack reproducible code:
https://snack.expo.io/@yajana/slider

[YajanaRao]

I had to use React Native Elements Slider with orientation= vertical

[karpov-denys]

orientation= vertical

Hi. Could you specify how you get vertical slider from React Native Elements Slider?
My code is
` style={{ flex: 1 }}
>

    <Slider
      orientation="vertical"
      trackStyle={{ height: 10, backgroundColor: "lightgrey" }}
      thumbStyle={{ height: 40, width: 40, backgroundColor: "red" }}
    />

`

But my slider is still horizontal

[tiwari-ashwani]

Still not able to allign the slider vertically, any luck anybody?