Как сделать 2 ползунка в Input=range?

Question

Александр Анкудинов @Ankudinov_Alex

HTML
CSS

Как сделать 2 ползунка в Input=range?

Как сделать 2 ползунка в Input=range? и дополнительно выводил минимальное и максимальное значение при изменении ползунков?

Вопрос задан более трёх лет назад
20050 просмотров

1 комментарий

Подписаться 2 Оценить 1 комментарий

Денис @rebelus

Можно на javascript + CSS. Немного костыльно но работает. За код прошу не пинать, только учусь.

<div class="container">

        <div class="fWrapper">
            <div class="inputWrapper">
                <label>
                    <input type="text" name="textMin" value="" >
                </label>
                <label>
                    <input type="text" name="textMax" value="">
                </label>
            </div>
            <div class="rangeWrapper">
                <div class="bgRange"></div>
                <div class="activebgRange"></div>
                <input type="range" step="1" name="rangeMin" min="1" max="100" value="1" id="">  
                <input type="range" step="1" name="rangeMax" min="1" max="100" value="100" id="">  
            </div>
        </div>
        <div class="fWrapper">
            <div class="inputWrapper">
                <label>
                    <input type="text" name="textMin" value="">
                </label>
                <label>
                    <input type="text" name="textMax" value="">
                </label>
            </div>
            <div class="rangeWrapper">
                <div class="bgRange"></div>
                <div class="activebgRange"></div>
                <input type="range" step="1" name="rangeMin" min="1" max="100" value="1" id="">  
                <input type="range" step="1" name="rangeMax" min="1" max="100" value="100" id="">  
            </div>
        </div>
        <div class="fWrapper">
            <div class="inputWrapper">
                <label>
                    <input type="text" name="textMin" value="">
                </label>
                <label>
                    <input type="text" name="textMax" value="">
                </label>
            </div>
            <div class="rangeWrapper">
                <div class="bgRange"></div>
                <div class="activebgRange"></div>
                <input type="range" step="1" name="rangeMin" min="1" max="100" value="1" id="">  
                <input type="range" step="1" name="rangeMax" min="1" max="100" value="100" id="">  
            </div>
        </div>

    </div>

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 980px;
    padding: 0 28px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.fWrapper {
    margin-bottom: 48px;
}
.rangeWrapper {
    box-sizing: border-box;
    position: relative;
    touch-action: none;
    pointer-events: none;
    height: 24px;
    margin: 16px 0;
}
.bgRange, .activebgRange {
    position: absolute;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
}
.bgRange {
    left: 0;
    width: 100%;
    background-color: #f5c2c2;
}
.activebgRange {
    left: 0;
    width: 100%;
    background-color: var(--color-font-sale-light);
}
.rangeWrapper input[type=range] {
    position: absolute;
    margin: 0;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    background: transparent;
    outline: none;
    height: 24px;
 }

/*input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}*/

input[type=range]:focus {
    outline: none; 
}
input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
}
input[type="range"]::-moz-range-thumb {
    pointer-events: all;
}
input[type="range"]::-ms-thumb {
    pointer-events: all;
}

document.addEventListener('DOMContentLoaded', function(){
    const wrapperSliders = document.querySelectorAll('.fWrapper');
    wrapperSliders.forEach(function(el) {
        const textMin = el.querySelector('input[name="textMin"]');
        const textMax = el.querySelector('input[name="textMax"]');
        const rangeMin = el.querySelector('input[name="rangeMin"]');
        const rangeMax = el.querySelector('input[name="rangeMax"]');


        function rangeChangeMin() {
            const dataMin = rangeMin.getAttribute('min');
            if (+textMin.value > +textMax.value) {
                textMin.value = +textMax.value;              
            }
            if (+textMin.value < +dataMin) {
                textMin.value = +dataMin;
            }
            rangeMin.value = textMin.value;
        }
        function rangeChangeMax() {
            const dataMax = rangeMax.getAttribute('max');
            if (+textMax.value < +textMin.value) {
                textMax.value =  +textMin.value;              
            }
            if (+textMax.value > +dataMax) {
                textMax.value = +dataMax;
            }
            rangeMax.value = textMax.value;
        }

        function textChangeMin() {
            if (+rangeMin.value > +rangeMax.value) {
                rangeMin.value = +rangeMax.value;              
            }
            textMin.value = rangeMin.value;
        }
        function textChangeMax() {
            if (+rangeMax.value < +rangeMin.value) {
                rangeMax.value = +rangeMin.value;              
            }
            textMax.value = rangeMax.value;
        }



        textMin.addEventListener('change', rangeChangeMin);
        textMax.addEventListener('change', rangeChangeMax);

        rangeMin.addEventListener('input', textChangeMin);
        rangeMax.addEventListener('input', textChangeMax);

        rangeMin.addEventListener('change', textChangeMin);
        rangeMax.addEventListener('change', textChangeMax);

    });
});

Написано более трёх лет назад

Помогут разобраться в теме Все курсы