reactjsreact-nativesliderreact-native-elements

How to change Track Color in a Slider


I was using Slider component from the library 'react-native-elements'. Below is the code for your reference:

  <Slider
                            style={{ width: '70%', marginTop: -12 }}
                            minimumValue={0}
                            maximumValue={100}
                            value={intensity}
                            step={1}
                            thumbStyle={{
                                width: 10, // Customize thumb width
                                height: 10, // Customize thumb height
                                borderRadius: 10, // Make thumb circular
                            }}
                            trackStyle={{
                                height: 2, // Customize track height
                                borderRadius: 0, // Make track rounded
                            }}
                            onValueChange={handleIntensityChange}
                            thumbTintColor="#0F8D48" // Customize thumb color
  />

What i want is to change the track color as i move the thumb along. Is there a way to change the color of the track?

I tried adding backgroundColor: "some hashcode" inside the trackStyle. It didn't work for some reason.


Solution

  • minimumTrackTintColor="rgba(0, 196, 239, 1)"
    maximumTrackTintColor="grey"
    thumbTintColor="rgba(0, 196, 239, 1)"