Click here to Skip to main content
16,019,976 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a two thumb range slider to set the max value and the min value, now I realized that it's possible to go over the thumbs - max can go over min and min over max.

I want to limit min to not go over max and max not over min

After some researched I've not seen any usefull JS. Is there any option I can use for this one.

What I have tried:

JS:
JavaScript
const twoRangeSlider = (() => {
  const rangeCheck = (rangeInputs, rangeMinOutput, rangeMaxOutput) => {
    const rangeMin = rangeInputs[0].min ? rangeInputs[0].min : 0;
    const rangeMax = rangeInputs[0].max ? rangeInputs[0].max : 100;
    let rangeMinValue = parseFloat(rangeInputs[1].value);
    let rangeMaxValue = parseFloat(rangeInputs[0].value);

    rangeMinValue = Math.min(Math.max(rangeMinValue, rangeMin), rangeMaxValue);


    const rangeMinPercentage = Number(
      ((rangeMinValue - rangeMin) * 100) / (rangeMax - rangeMin));
    const rangeMaxPercentage = Number(
      ((rangeMaxValue - rangeMin) * 100) / (rangeMax - rangeMin));


    rangeInputs[0].style.background = `linear-gradient(to right, #000 ${rangeMaxPercentage}%, #c4c8ca ${rangeMaxPercentage}%)`;
    rangeInputs[1].style.background = `linear-gradient(to right,#c4c8ca ${rangeMinPercentage}%, transparent ${rangeMinPercentage}%)`;


  };

  const bindComponent = (item) => {
    const rangeInputs = item.querySelectorAll('.js-two-range-slider-input');
    const rangeMinOutput = item.querySelector('.js-two-range-slider-min-value');
    const rangeMaxOutput = item.querySelector('.js-two-range-slider-max-value');

    item.addEventListener("input", () => {
      rangeCheck(rangeInputs, rangeMinOutput, rangeMaxOutput);
    });

    rangeCheck(rangeInputs, rangeMinOutput, rangeMaxOutput);
  };

  const init = () => {
    const rootEl = document.getElementsByClassName("js-two-range-slider");
    [...rootEl].forEach((item) => bindComponent(item));
  };

  return {
    init
  };
})();

twoRangeSlider.init();


HTML:

HTML
<div class="two-range-slider js-two-range-slider">
  <input type="range" value="80" min="10" max="100" step="1" class="two-range-slider__input js-two-range-slider-input">
  <input type="range" value="30" min="10" max="100" step="1" class="two-range-slider__input js-two-range-slider-input">

  <div class="two-range-slider__output">
    <p class="minmax">Min</p><input class="two-range-slider__value js-two-range-slider-min-value" type="number" value="30" min="10" max="100" step="1"></input>
    <p class="maxmin">Max</p><input style="right: -5px;" class="two-range-slider__value js-two-range-slider-max-value" type="number" value="80" min="10" max="100" step="1"></input>
  </div>

</div>


CSS:

CSS
.two-range-slider {
  position: relative;
  height: 4px;
  width: 164px;
  margin-bottom: 50px;
}

.two-range-slider__input {
  position: absolute;
  left: 40%;
  top: 15px;
  box-shadow: 0;
  appearance: none;
  width: 60%;
  height: 3px;
  border-radius: 50px;
  background-color: #000;
  outline: 0;
}

.two-range-slider__value {
  padding: 0px 10px;
  color: #000;
  position: relative;
  top: 19px;
  outline: none;
  width: 50px;
  position: absolute;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-range-slider__input::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

.two-range-slider__input::-moz-range-thumb {
  z-index: 2;
  position: relative;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 0;
  background: #FFFFFF;
  cursor: pointer;
}

.two-range-slider__output {
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 140%;
  top: -15px;
  margin-left: 0px;
  color: #000;
  position: relative;
}

.range-slider__value {
  padding: 0px 10px;
  color: #000;
  outline: none;
  width: 50px;
}
Posted
Updated 13-Jul-22 22:10pm

1 solution

Try to think about it from a user perspective: perhaps if you made it so that lowing the Max value below the Min also changed the Min value slider and vice versa that might be easier for the user to work with.

Then it's a simple matter of handling the onchange event for both sliders and adjusting as necessary - no need to try and "lock" a slider.
 
Share this answer
 
v2
Comments
Member 14783397 14-Jul-22 4:51am    
and how does that work with adjusting the onchange event ?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900