search

callstack / react-native-slider

React Native component exposing Slider from iOS and SeekBar from Android
MIT License
1.21k stars 270 forks source link

Is there a way to have the slider button start in the middle and have the fill color also start from the middle? #612

Closed itsgeraldwang closed 4 months ago

itsgeraldwang commented 4 months ago

Ask your Question

See title. I would like to create something like this design. Is it possible with the current features offered?

Screen Shot 2024-06-22 at 6 32 19 PM
BartoszKlonowski commented 4 months ago

Hello @itsgeraldwang, thanks for reaching out! There is the trackImage feature which would allow you to replace the track with the image you would have to prepare according to your design. Another option, more complicated though, would be to use StepMarker: Prepare the step marker transparent for each step, with their layout being the height of the track's width, calculate the difference between the middle step and the thumbs position (by using the value prop of the thumb and the StepMarker), change the style of those steps that are in between the middle and thumb's position, so that the desired gradient is rendered.

Give it a try, or let me know if you have some more questions/issues. Also, if you'll have some findings or conclusions, I'm happy to hear.

itsgeraldwang commented 4 months ago

Thanks for the response, I'll try playing around with that and get back to you if it works or if I have any other questions.

itsgeraldwang commented 4 months ago

I was able to get it to work by overlaying a track over the slider itself and adjusting the width of the overlayed track using the value prop from the slider. One more question though:

Is there any way to adjust the styling of the slider button such as size and shape? I see there is a thumb image prop but I would rather style the button through native styling instead of using an image.

itsgeraldwang commented 4 months ago

Nvm, read through some of the pending issues and looks like button styling isn't a feature yet. I'll mark this as resolved since the original question has been answered, but +1 to having a way to style the thumb!