How to get dynamic steps and dependencies in React input type range (slider)?

user_16434430 0
Viewed 565

I need to have two input-sliders of range type.

Below is my sandbox for my variant, but I think it's not the exact way.

So, the first slider should have: min value = 1000, max value 20000, and step = 1000. (pretty easy)

The second one should have: min value = 3, max value = 70, and dynamic step [3, 7, 14, 54, 70]. How do I achieve dynamic step?

Also those sliders have dependencies:

If first input has value more than 10000, the second should have value 54 and it cannot be moved lower.

If first input has value less than 10000, the second should have values 3,7,14 but cannot be moved higher to 54 and 70.

Code for tests is here: Sandbox

Thanks in advance for your suggestions.

reactjs range slider input
1 Answers

Here you have Sandbox with my answer.

What I did:

  • I created an array with steps for the second slider.
  • Use indexes as steps.
  • Change an array from [54,70] to [3,7,14] and reset the value for the second slider whenever the user crosses the 10000 value in the first slider.
user_142251120
Related