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:
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:
<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:
.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;
}