Меняем цвет слайдера HTML5 в CSS до и после ползунка

Быстрый ответ

Для того чтобы цвет слева и справа от ползунка элемента <input type="range"> различался, следует применить CSS-градиенты и JavaScript для динамического обновления стилей. Вот пример такого оформления:

<input type="range" id="slider" style="background: linear-gradient(to right, green 50%, red 50%);" oninput="this.style.background = `linear-gradient(to right, green ${this.value}%, red ${this.value}%)`;">

С помощью события oninput можно изменять фоновый стиль в реальном времени при перемещении ползунка. Обозначенные в примере цвета (зелёный и красный) можно подменять на любые другие в зависимости от ваших предпочтений.

Реализация кросс-браузерной совместимости

Чтобы обеспечить совместимость стилей с различными браузерами, следует учитывать, что стилизация ползунка может варьироваться:

• В браузерах на движке WebKit (например, Chrome и Safari) используйте префикс -webkit.
• В Firefox – префикс -moz.
• В Internet Explorer стили задаются через -ms.

Пошаговая настройка стилей для различных браузеров

1. Сброс начальных стилей: Сначала следует отключить стандартные стили, используя -webkit-appearance: none, чтобы во всех браузерах начальный вид был одинаковым.

   CSS

   Скопировать код

   input[type=range] {
     -webkit-appearance: none;
     width: 100%; // Позволяем ползунку занимать всю ширину!
   }

   Запустить код

2. Оформление трека: Для браузеров на движке WebKit применяется ::-webkit-slider-runnable-track, для Firefox – ::-moz-range-track.

3. Стилизация ползунка: И для WebKit, и для Firefox используйте ::-webkit-slider-thumb и ::-moz-range-thumb соответственно.

4. Динамическое изменение цветов при помощи JavaScript: Для изменения цветов в зависимости от положения ползунка используйте JavaScript, который эффективно будет работать во всех браузерах.

   JS

   Скопировать код

   const range = document.getElementById('slider');
   range.addEventListener('input', () => {
     const value = (range.value-range.min)/(range.max-range.min)*100;
     range.style.background = 'linear-gradient(to right, green ' + value + '%, red ' + value + '%)';
   });

   Запустить код

5. Альтернатива для устаревших браузеров: Если нужно работать с браузерами, которые не поддерживают псевдоэлементы (например, IE), уместно использовать JavaScript polyfill.

   JS

   Скопировать код

   (function() {
     var supportsRange = 'max' in document.createElement('input');
     if (!supportsRange) initializeFallback();
   })();

   Запустить код

Подробнее об этом расскажет наш спикер на видео

Важность деталей

Отдельное внимание стоит уделить размеру ползунка и градиенту, чтобы цветовые переходы были плавными. Это можно реализовать с помощью CSS-анимаций.

Визуализация

Аналогом ввода диапазона HTML5 можно считать окраску стены. При перемещении ползунка, как бы происходит окраска кирпичей с одной стороны:

Начало некрашеной стены [Некрашеные кирпичи: ◽◽◽◽◽◽]------[Пушка с краской: 💣]------[Некрашеные кирпичи: ◽◽◽◽◽◽] Конец некрашеной стены

Когда ползунок перемещается, видимое изображение меняется:

Начало покрашеной стены [Покрашенные кирпичи: 🟥🟥🟥🟥🟥]---💣---[Некрашеные кирпичи: ◽◽◽◽◽◽] Конец покрашеной стены

Таким образом можно визуализировать изменение цвета слева и справа от ползунка.

Тонкости стилизации

Максимальное применение псевдоэлементов

Для браузеров на движке WebKit использование ::-webkit-slider-thumb и ::-webkit-slider-runnable-track позволяет стилизовать ползунок и трек независимо друг от друга. Аналогичные псевдоэлементы есть и у Firefox.

/* Для WebKit-браузеров */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; // Отключаем стандартные стили!
}

input[type=range]::-webkit-slider-runnable-track {
  background: red; // Делаем фон трека красным!
}

/* Для Firefox */
input[type=range]::-moz-range-thumb {
  border: none; // Ползунок без рамки.
}

input[type=range]::-moz-range-track {
  background: blue; // Синий фон трека.
}

Динамическая смена цветов при помощи JavaScript

JavaScript позволяет создать оформление, które будет изменяться при перемещении ползунка, сохраняя при этом кросс-браузерную совместимость.

const slider = document.getElementById('slider');
slider.addEventListener('input', function () {
  const percentage = slider.value;
  slider.style.background = `linear-gradient(to right, blue ${percentage}%, gray ${percentage}%)`;
});

Акцент на цвете при помощи 'accent-color'

Свойство accent-color в CSS позволяет быстро настроить цвет ползунка, однако предоставляет меньшую свободу для стилизации, чем другие методы.

input[type=range] {
  accent-color: blue; // Выбираем акцентный цвет
}

Повышение совместимости и визуального восприятия

Проверка поддержки браузерами

Перед применением стилей стоит удостовериться в поддержке свойств и псевдоэлементов браузерами. Для этого можно воспользоваться такими ресурсами, как MDN и Can I use.

Усовершенствование внешнего вида

Ползунок станет более привлекательным, если применить такие свойства, как box-shadow, border-radius и outline.

Полезные материалы

1. Styling Cross-Browser Compatible Range Inputs with CSS | CSS-Tricks — Практическое руководство по стилизации ползунков с учётом совместимости с браузерами.
2. ::-webkit-slider-thumb – CSS: Cascading Style Sheets | MDN — Описание псевдоэлемента -webkit-slider-thumb на сайте MDN.
3. JavaScript + CSS Range Slider | Custom Value Range Slider Web Design Tutorial – YouTube — Видеоурок, демонстрирующий создание пользовательского ползунка диапазона.
4. HTML5 forms input types | HTML5 Doctor — Обзор типов ввода в формах HTML5, включая элемент диапазона.
5. Tutorial | DigitalOcean — Подробная инструкция по стилизации ползунка диапазона в HTML5.