React Native, change the height of react-native-community/slider and thumb icon

user_12968130 0
Viewed 1569

I used @react-native-community/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>

enter image description here

react-native reactjs javascript
2 Answers

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.

  1. Use an alternative Slider:

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

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

user_17729900

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

user_12833450
Related