Создание ползунка Range slider

Owebs

19 августа 2022

223

Время чтения: 2 минуты

Оглавление

Развернуть Свернуть

Сегодня мы с вами научимся верстать range slider. Иначе говоря, ползунок для выбора количества чего-либо. Подобные ползунки часто используются в интернет-магазинах. Но в них есть загвоздка. Изначально <input type="range"> не предусматривает стилизацию. Это мы с вами сегодня и исправим.

Для создания пользовательского ползунка перекопируйте следующие части кодов:

HTML:

                <div class="range_box">
                    <input type="range" class="range" value="0" min="0" max="100">
                    <span class="rangeValue">0</span>
                </div>

CSS:

                .range_box {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 20px;
                    background-color: #c9c9c9;
                    border-radius: 40px;
                }
        
                .range {
                    width: 400px;
                    height: 15px;
                    appearance: none;
                    background: #edf1f4;
                    outline: none;
                    border-radius: 15px;
                    overflow: hidden;
                }
        
                .range::-webkit-slider-thumb {
                    appearance: none;
                    width: 15px;
                    height: 15px;
                    background: #fff;
                    border-radius: 50%;
                    border: 2px solid #022f52;
                    box-shadow: -407px 0 0 400px #022f52;
                    cursor: pointer;
                }
        
                .rangeValue {
                    position: relative;
                    text-align: center;
                    width: 60px;
                    font-size: 1.25em;
                    color: #fff;
                    background: #022f52;
                    margin-left: 15px;
                    border-radius: 25px;
                    font-weight: 500;
                }

JS:

                document.querySelectorAll('.range_box input').forEach(item => {

                    item.addEventListener('mousemove', function() {
        
                        this.closest('.range_box').querySelector('.rangeValue').innerHTML = this.value;
                    })
        
                });

После копирования вышеупомянутых кусков кода, у вас должен появиться такой ползунок:

Наш ползунок готов. Изменять стили CSS можно по собственному желанию. Для корректной работы ползунка не рекомендуем вносить изменения в структуру html или JavaScript кода.