Vertical Orientation does not work!

[AakashKB]

Vertical orientation does not work. I still have to transform it be 90 degrees and when I do, the slider does animate properly. Inverted does not work while doing this either. Here is my code:

<Slider
                    style={{flex:1,backgroundColor:"pink",transform: [{ rotate: '90deg'}]}}
                    trackStyle={{height:10,width:200}}
                    value={this.state.strokeWidth}
                    onValueChange={value=>this.setState({strokeWidth:value})}
                    orientation="vertical"
                    inverted={true}
                    minimumValue={1}
                    maximumValue={20}
                    step={2}
                    onSlidingComplete={value=>alert(value)}
/>

[timorss]

try orientation={'vertical'}

[olekspickle]

Same issue here. Moreover Im not even was able to manage value correctly in rotated state(without rotation it is working fine). <Slider style={{ width: 270, marginHorizontal: 15, transform:[{ rotate(-90deg)}] }} value={moodValue} invert orientation={'vertical'} onValueChange={this.handleMoodValueChange} maximumValue={11} minimumValue={0} step={1} thumbStyle={{backgroundColor: 'green', borderColor: '#8134f8', borderWidth: 3 }} thumbTouchSize={{width: 60, height: 60}} minimumTrackTintColor={'#f60'} /> However I solved the problem with Slider from react-native-elements with the same props. P.S. Still figuring out how to invert it though))

[YoussiaTang]

I had the same problem,when this component is rotated, can't slide properly.Here is my code <View style={{transform: [{rotateZ:'-90deg'}]}}> <RNSlider style={styles.slider} trackStyle={styles.track} thumbStyle={styles.thumb} minimumTrackTintColor='#da282e'/> </View>

[ajaykumar97]

I also have same issue. Please provide a solution for this. Slider does not work with 'transform: [{ rotate: '-90deg' }]' style.

[AnandKumar1100]

same issue here if i use rotation then it's UI distorts, height and width not working properly

[shanekoss]

same issue as well. orientation={'vertical'} or orientation='vertical' does not work. Transform works visually, but the slider no longer moves when clicked.

[TimmeeG]

this fork: https://github.com/emmanuellmota/react-native-slider handles vertical sliders. Pass in vertical as a prop. You still have to handle all the transforms yourself, but moving up and down worked for me in simulator.