7

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)

Hugo Bounoua
  • 415
  • 4
  • 10
  • Does this work with steps? so it increases by 5 instead of one – Ade Crown Jul 08 '21 at 13:16
  • 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) – Hugo Bounoua Jul 09 '21 at 15:55
  • 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 – Ade Crown Jul 13 '21 at 08:45
  • this should happen on drag – Ade Crown Jul 13 '21 at 08:56
  • 1
    @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 – Hugo Bounoua Jul 13 '21 at 16:13
  • Nice Work @HugoBounoua, Can you tell me how i can pass the data to the parent component ? – pinoyCoder Nov 22 '21 at 10:23
  • @pinoyCoder Pass a parent's function to the component: 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) – Hugo Bounoua Nov 23 '21 at 16:28

0 Answers0