CODEWITHSUNDEEP
react-nativeslider
Andry
Andry

Reputation: 367

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?

Upvotes: 2

Views: 1587

Answers (2)

Andry
Andry

Reputation: 367

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.

Upvotes: 0

Gaurav Roy
Gaurav Roy

Reputation: 12195

I dont think any package upfront gives this functionality, but you can always use linear-gradient. this library, make a view with. gradient like that, and on top of that, by using position:'relative' make a cursor and slide it by using rn-draggable . You will need to work out on that, but you can create a new functionality , and maybe publish it so that it can be used by others in future.

Hopeit helps.feel free for doubts

Upvotes: 2

Related Questions