Search code examples
react-nativeslider

Gradient slider in React Native?


Is it possible to implement slider with static gradient track in React Native using any 3rd party library or what-soever?

Illustrative image from Google: enter image description here

Right now I'm using sldier from @react-native-community/slider, but it doesn't seem to support gradient slider track? I can customize minimumTrackTintColor and maximumTrackTintColor, but I would like to have static gradient track independent of the indicator position. I have looked into other 3rd party slider libraries as well, but encountered the same problem.

So, is there any way in any library to achieve this in React Native?


Solution

  • Inspired from what @Gaurav_Roy answered above, in the end, I achieved what I wanted with react-native-gesture-responder . I positioned my custom gradient slider track and slider dot as images and used createResponder from the library to capture user interactions with the slider dot. Then calculated the distance between dot position and track edges to get the value.