I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa.
I am looking for a solution to prevent the min value from exceeding the max value and ensure that the max value does not go below the min value.
Despite conducting some research, I have not come across any useful JavaScript solutions for this issue. Is there any alternative option available that could help in resolving this matter?
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();.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;
}<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>