Vertical Slider about react-native-slider HOT 11 CLOSED

We got it working with:

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

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

from react-native-slider.

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.

from react-native-slider.

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.

from react-native-slider.

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

from react-native-slider.

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

from react-native-slider.

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

from react-native-slider.

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

from react-native-slider.

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

from react-native-slider.

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

from react-native-slider.

orientation= vertical

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

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

`

But my slider is still horizontal

from react-native-slider.

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

from react-native-slider.