CODEWITHSUNDEEP
javascript
user13631004
user13631004

Reputation: 5

Two Range Sliders that adjust one another

I am looking to find a way, using javascript to modify the value one one range slider based on the value of another.

I will not be using one slider with two values, but two distinct sliders, stacked one of the other. Each range slider will have a possible value from 1-10. We will call them Slider-A and Slider-B.

For any given value of one of the sliders there will be a specific value the other must be at. I want to allow the user to freely adjust either slider but by doing so the other slider will be adjusted to its matching position. Here is how the values will relate, the first value represents Slider-A, the second Slider-B.

1,  10
2,  9
3,  8
4,  7
5,  6
6,  5
7,  4
8,  3
9,  2
10, 1

I'm just not sure where to start any suggestions would be appreciated.

Upvotes: 0

Views: 1133

Answers (1)

Burgan
Burgan

Reputation: 900

It can sometimes be daunting when you're not sure where to start, but posting some attempted code no matter how wrong is always encouraged. The comment should get you started, but I'll provide a full example below to help you out.

<input id="a" type="range" min="1" max="10" value="1">
<input id="b" type="range" min="1" max="10" value="10">

<script>
  // change b when a is adjusted
  document.getElementById('a').addEventListener('change', function (e) {
    document.getElementById('b').value = 10 - (e.target.value - 1)
  })

  // change a when b is adjusted
  document.getElementById('b').addEventListener('change', function (e) {
    document.getElementById('a').value = 10 - (e.target.value - 1)
  })
</script>

Upvotes: 2

Related Questions