I used @react-native-munity/slider for my app, but I'm facing a problem that it's height is not changing, it's width is changing but not height, anyone know why? and also I want to render value of slider like in the blue container inside the slider thumb, is there a way to do that? Please Help

That's my code of slider

<View>
          <Text style={[style.fontSize15Med, styles.font15]}>
            Number of surveys
          </Text>
          <View style={styles.daysCont}>
            <Text style={[style.fontSize12Med, styles.surveys]}>
              {this.state.surveys}
            </Text>
          </View>
          <Slider
            style={{width: 320, height: 30, marginLeft: 40}}
            minimumValue={0}
            maximumValue={10}
            step={1}
            maximumTrackTintColor={colors.DarkBlue}
            minimumTrackTintColor={colors.primary}
            thumbTintColor={colors.skyBlue}
            value={this.state.surveys}
            onValueChange={(val) => this.setState({surveys: val})}
          />
        </View>

I used @react-native-munity/slider for my app, but I'm facing a problem that it's height is not changing, it's width is changing but not height, anyone know why? and also I want to render value of slider like in the blue container inside the slider thumb, is there a way to do that? Please Help

That's my code of slider

<View>
          <Text style={[style.fontSize15Med, styles.font15]}>
            Number of surveys
          </Text>
          <View style={styles.daysCont}>
            <Text style={[style.fontSize12Med, styles.surveys]}>
              {this.state.surveys}
            </Text>
          </View>
          <Slider
            style={{width: 320, height: 30, marginLeft: 40}}
            minimumValue={0}
            maximumValue={10}
            step={1}
            maximumTrackTintColor={colors.DarkBlue}
            minimumTrackTintColor={colors.primary}
            thumbTintColor={colors.skyBlue}
            value={this.state.surveys}
            onValueChange={(val) => this.setState({surveys: val})}
          />
        </View>

• javascript
• reactjs
• react-native

3 Answers 3

As for Mar 2022, there's no property to change the slider thickness, but there are a few workaround options.

1. Use scaleY CSS styling: transform: [{ scaleY: 2 }]

<Slider
  style={{ width: 320, transform: [{ scaleY: 2 }] }}
  ...
/>

This example will double the slider bar thickness. The downside is that it increases the knob button.

2. Use an alternative Slider:

   https://github./miblanchard/react-native-slider

3. Create a fake slider using View ponents, and place it over the actual Slider: https://stackoverflow./a/47246453/1772990

You can use custom thumb image like

const thumbImage = require('shared/img/slider-thumb.png');

<Slider
   .......
   thumbImage={thumbImage}
   style={{width: 200, height: 40}} // height, width
/>

More info found here thumbimage

For slider height simply use minHeight or maxHeight:

         <Slider
        style={{ width: '90%',
                 maxHeight: 20,
                 borderWidth: 2,
                 borderRadius: 20,
              }} // instead of using height use maxHeight or minHeight 
                 // to change slider height
        minimumValue={0}
        maximumValue={1}
        minimumTrackTintColor={'#fff'} // use white color here
        maximumTrackTintColor={'#fff'} // use white color
        thumbTintColor={selectedStep.color}


        value={sliderValue}
        onValueChange={val => {
          
        }}
      />