________
const sliders = document.querySelectorAll('input[type="range"]');
const rezs = document.querySelectorAll('.sliders_control output');
sliders[0].addEventListener('input', (e) => {
if(+sliders[0].value >= +sliders[1].value){
sliders[0].value = sliders[1].value;
}
rezs[0].innerHTML = sliders[0].value;
});
sliders[1].addEventListener('input', (e) => {
if(+sliders[1].value <= +sliders[0].value){
sliders[1].value = sliders[0].value;
}
rezs[1].innerHTML = sliders[1].value;
});
function doubleRange(e){
let x = e.offsetX*100/e.currentTarget.offsetWidth;
let x0 = sliders[0].value*100/sliders[0].max;
let x1 = sliders[1].value*100/sliders[1].max;
if (x < (x0 + x1)/2) {
sliders[0].classList.add('index');
} else {
sliders[0].classList.remove('index');
}
}
sliders[0].addEventListener('mousemove', doubleRange);
sliders[1].addEventListener('mousemove', doubleRange);
sliders[1].addEventListener('pointerdown', (e) => {
let x = e.offsetX*100/e.currentTarget.offsetWidth;
let x0 = sliders[0].value*100/sliders[0].max;
let x1 = sliders[1].value*100/sliders[1].max;
if (x < (x0 + x1)/2) {
e.preventDefault();
sliders[0].classList.add('index');
sliders[0].value = x*sliders[0].max/100;
}
});
sliders[0].addEventListener('pointerdown', (e) => {
let x = e.offsetX*100/e.currentTarget.offsetWidth;
let x0 = sliders[0].value*100/sliders[0].max;
let x1 = sliders[1].value*100/sliders[1].max;
if (x > (x0 + x1)/2) {
e.preventDefault();
sliders[0].classList.remove('index');
sliders[1].value = x*sliders[1].max/100;
}
});
sliders[0].addEventListener('pointermove', doubleRange);
sliders[1].addEventListener('pointermove', doubleRange);
sliders[0].addEventListener('pointerdown', doubleRange);
sliders[1].addEventListener('pointerdown', doubleRange);
input[type="range"]:not(.index) {
pointer-events: none;
}
input[type="range"].index {
z-index: 1;
}
.sliders_control:active::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 1px solid;
}
document.querySelector('.sliders_control').onclick = function(e) {
sliders[0].classList.remove("index");
sliders[1].classList.remove("index");
let x = e.offsetX;
let x0 = sliders[0].value*100/sliders[0].max;
let x1 = sliders[1].value*100/sliders[1].max;
if (x < (x0 + x1)/2) {
sliders[0].classList.add('index');
} else {
sliders[1].classList.add('index');
}
}
https://stackoverflow.com/questions/74828636/css-for-two-button-range-slider
https://ru.stackoverflow.com/questions/1025336/%D0%94%D0%B2%D0%B0-%D0%B1%D0%B5%D0%B3%D1%83%D0%BD%D0%BA%D0%B0-%D1%83-input-%D1%81-%D1%82%D0%B8%D0%BF%D0%BE%D0%BC-range?ysclid=lu5ab6ot76673365139
.sliders_control {
position: relative;
min-height: 50px;
}
input[type=range]::-webkit-slider-thumb {
pointer-events: all;
}
input[type=range]::-moz-range-thumb {
pointer-events: all;
}
input[type="range"] {
position: absolute;
pointer-events: none;
}