Range-input with two Inputs can be dragged over each other

February 24, 2023

I am trying to create a range-input with a maximum and minimum input.
I habe achived this so far:

HTML

<div class="zimmer__price">
 <input type="range" min="200" max="500" step="50" value="50" id="lower">
 <input type="range" min="200" max="500" step="50" value="500" id="upper">
</div>

JS:

upperSlider.oninput = () => {
  lowerVal = parseInt(lowerSlider.value, 10);
  upperVal = parseInt(upperSlider.value, 10);

  currentPriceRange[1] = upperVal;
  currentPriceRange[0] = lowerVal;
};

lowerSlider.oninput = () => {
  lowerVal = parseInt(lowerSlider.value, 10);
  upperVal = parseInt(upperSlider.value, 10);

  currentPriceRange[1] = upperVal;
  currentPriceRange[0] = lowerVal;
};

My problem is, that you can drag the minimum input over the maximum and vise versa. How can I fix this?

>Solution :

This should work. You need to check the value of the other input and subtract or add to the value.

HTML

<div class="zimmer__price">
 <input type="range" min="200" max="500" step="50" value="50" id="lower">
 <input type="range" min="200" max="500" step="50" value="500" id="upper">
</div>

JS:

upperSlider.oninput = () => {
  lowerVal = parseInt(lowerSlider.value, 10);
  upperVal = parseInt(upperSlider.value, 10);

  if (upperVal < lowerVal + 50) {
    lowerSlider.value = upperVal - 50;
  }
  currentPriceRange[1] = upperVal;
  currentPriceRange[0] = lowerVal;
};

lowerSlider.oninput = () => {
  lowerVal = parseInt(lowerSlider.value, 10);
  upperVal = parseInt(upperSlider.value, 10);

  if (lowerVal > upperVal - 50) {
    upperSlider.value = lowerVal + 50;
  }
  currentPriceRange[1] = upperVal;
  currentPriceRange[0] = lowerVal;
};