Custom Slider and Range Slider for React Native

Question

I spent 3 days developing Custom Slider and Range Slider for React Native. I am astonished to see that the slider components in React Native are so basic and don't allow any customization. I wanted to share the Slider scripts I made so everyone can use them in their projects.

Custom Slider

Custom Slider examples

Range Slider

Range Slider examples

Don't hesitate to reach out if you detect any bugs or problems. (These scripts are fully compatible with Expo)

Augury

Does this work with steps? so it increases by 5 instead of one – Counselor

Hi, can you describe exactly what you want to do ? If it's just having the value multiplied by 5 you can just multiply the value "animState.displayMinVal" when you display it (or affect it) – Augury

what i'm trying to do is for it to go from 0 to 5 then 5 to 10 and so on. So plus 5 – Counselor

this should happen on drag – Counselor

@AdeCrown Sure! If I understood you correctly, the only thing you have to do is to wrap the value displayed with this function : const stepRender = (value, step = 5) => { if(step === 0) return 0; else return Math.trunc(value/step) * step; }; For example : {stepRender(animState.displayMinVal)} The value will only be updated when the result is in a new range of 5 – Augury

Nice Work @HugoBounoua, Can you tell me how i can pass the data to the parent component ? – Superfine

@Superfine Pass a parent's function to the component: <CustomSlider readValue={(val) => setValue(val)} />. In the CustomSlider now, add this function where you want to read it. For example, if you want to get the value when the slider is release (probably the most common use case), just add this line [props.readValue(animState.displayMinVal);] in the PanResponder's "onPanResponderRelease" function. Otherwise if you want to read this value in "real time" just place this line at the end of the function "placeSlider" (be careful the parent will set the value everytime it changes) – Augury