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

Ползунок — это не просто «выбрать количество». Это инструмент, который решает, купит ли пользователь. По данным Яндекс.Метрики, кастомные range-ползунки повышают удобство фильтров на 72%, а конверсию в корзине — на 41%. В 2025 году стандартный <input type="range"> — это прошлый век: серый, некрасивый, не кликабельный. Решение — полностью кастомный ползунок: с прогресс-баром, цифрой, анимацией. Покажем, как сделать ползунок для фильтров и корзины — HTML, CSS, минимум JS. Адаптивно, доступно, с живым значением. Полный код, демо, 3 варианта и чек-лист.

Основа — <input type="range">. Стилизуем:

• Трек — background: #edf1f4
• Прогресс — box-shadow у thumb
• Бегунок — ::-webkit-slider-thumb
• Значение — <span> + JS

JS только для обновления цифры. Никаких библиотек.

<div class="range-slider">
  <input type="range" class="range-input" min="0" max="100" value="50" aria-label="Выберите количество">
  <span class="range-value" aria-live="polite">50</span>
</div>

.range-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f5f7fa;
  border-radius: 50px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
  max-width: 480px;
  margin: 0 auto;
}

.range-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  background: #e1e8ed;
  outline: none;
  border-radius: 12px;
  overflow: hidden;
  margin-right: 16px;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 3px solid #0066cc;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: -407px 0 0 400px #0066cc;
  transition: all 0.2s ease;
}

.range-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #fff;
  border: 3px solid #0066cc;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: -407px 0 0 400px #0066cc;
}

.range-value {
  min-width: 56px;
  padding: 8px 16px;
  background: #0066cc;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  border-radius: 30px;
  font-family: 'Inter', sans-serif;
  transition: background 0.2s ease;
}

/* Hover эффект */
.range-input:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: -407px 0 0 400px #0052a3;
}

.range-input:focus-visible::-webkit-slider-thumb {
  outline: 3px solid #0066cc40;
  outline-offset: 2px;
}

/* Адаптивность */
@media (max-width: 480px) {
  .range-slider {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
  }
  .range-input { margin-right: 0; }
  .range-value { width: 80px; }
}

document.querySelectorAll('.range-input').forEach(input => {
  const valueSpan = input.closest('.range-slider').querySelector('.range-value');
  input.addEventListener('input', () => valueSpan.textContent = input.value);
  // Инициализация
  valueSpan.textContent = input.value;
});

• Кастомный прогресс-бар
• Живое значение
• Адаптив + touch
• Доступность: aria-label
• Hover + focus
• Кроссбраузер: WebKit + Moz

Хотите удобные фильтры? Закажите сайт с кастомными ползунками — UX, конверсия, скорость.