Как создать пользовательский ползунок диапазона с помощью CSS

Структура элемента ввода диапазона

Давайте начнем с анализа структуры элемента ввода диапазона. Это собственный элемент, и каждый браузер имеет свою собственную реализацию таких элементов. В основном у нас есть две разные реализации.

Есть один для браузеров Webkit и Blink, таких как Chrome, Edge, Safari и Opera:

<input type="range" min="0" max="100" step="1" value="20">
  <div>
    <div pseudo="-webkit-slider-runnable-track" id="track">
      <div id="thumb">
    </div>
   </div>
  </div>
</input>

И это для Firefox:

<input type="range" min="0" max="100" step="1" value="20">
  <div></div>
  <div></div>
  <div></div>
</input>

Существует третья реализация для IE, но, к счастью, этот браузер практически мертв и его больше нет!

Такое несоответствие между браузерами - это то, что усложняет задачу, поскольку нам нужно предоставить различный стиль для каждой реализации. Не будем углубляться в это, поскольку статья тогда никогда не закончится.

Единственное, что вам нужно иметь в виду, это то, что, независимо от реализации, у нас всегда есть “большой палец” в качестве общего компонента.

Мы собираемся только оформить этот элемент, что упростит настройку пользовательского слайдера диапазона. Давайте сразу перейдем к коду, чтобы увидеть магию в действии.

Настройка входных данных

Первым шагом является сброс и отключение всех стилей браузера по умолчанию с помощью appearance: none и некоторых других общих свойств:

input {
  appearance :none;
  background: none;
  cursor: pointer;
}

В более сложном сценарии нам может потребоваться добавить больше кода на случай, если к нашему элементу будут применены другие стили по умолчанию. Просто нужно убедиться, что у нас есть “голый” элемент без какого-либо визуального оформления.

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

input {
  --c: orange; /* active color */
  --g: 8px; /* the gap */
  --l: 5px; /* line thickness*/
  --s: 30px; /* thumb size*/

  width: 400px; /* input width */
  height: var(--s); 
  appearance :none;
  background: none;
  cursor: pointer;
}

На этом шаге виден только большой палец со стилями по умолчанию.

Стилизация элемента Thumb

Давайте оформим элемент thumb. Мы начнем с базовой настройки:

<thumb selector> {
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--l) inset var(--c);
  appearance: none;
}

Код должен быть понятным. Пока ничего особенного.

Обратите внимание на использование двух разных селекторов, как мы объяснили в первом разделе:

/* Chrome, Edge, Safari, Opera */
input[type="range" i]::-webkit-slider-thumb { }
/* Firefox */
input[type="range"]::-moz-range-thumb { }

Но откуда вы знаете, какой селектор использовать?

Мы просто проверили код ввода с помощью инструментов разработчика браузера, чтобы увидеть селектор, который каждый браузер использует для оформления большого пальца.

Добавляем немного магии с помощью border-image

Теперь мы собираемся использовать волшебный CSS-трюк для завершения нашего слайдера. Это предполагает использование border-image:

border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 1/0 100vw/0 calc(100vw + var(--g));

Да, это выглядит пугающе, но давайте проанализируем эту линию, и вы увидите, что это не так уж сложно. Приведенное выше является сокращением для следующего:

border-image-source: linear-gradient(90deg,var(--c) 50%,#ababab 0); 
border-image-slice: 1;
border-image-width: 0 100vw;
border-image-outset: 0 calc(100vw + var(--g));

На странице MDN мы читаем:

border-image Свойство CSS рисует изображение вокруг заданного элемента. Он заменяет обычную границу элемента.

Наше изображение будет представлять собой градиент, имеющий два цвета — основной (определяется --c) и серый. Нам нужно, чтобы изображение границы охватывало все пространство входных данных по горизонтали, поэтому мы используем большое значение для ширины слева и справа (100vw), в то время как мы оставляем верх и низ равными (0).

Но border-image-width это ограничено размером элемента. Чтобы преодолеть это, нам также нужно использовать большое значение для border-image-outset, чтобы увеличить пространство, доступное для изображения границы. Снова из MDN:

border-image-outset Свойство CSS задает расстояние, на которое изображение границы элемента выделяется из его рамки.

Части изображения границы, которые отображаются за пределами рамки элемента с помощью border-image-outset, не вызывают переполнения полос прокрутки и не фиксируют события мыши.

Когда мы впервые видите ползунок, кажется, что мы увеличиваем основной цвет слева, но на самом деле мы перемещаем фиксированный градиент, который перекрывает наш элемент.

Следующая демонстрация предоставляет обзор того, что происходит под капотом.

clip-path:
    polygon(
       0     calc(50% + var(--l)/2),
      -100vw calc(50% + var(--l)/2),
      -100vw calc(50% - var(--l)/2),
       0     calc(50% - var(--l)/2),
       0 0,100% 0,
       100%  calc(50% - var(--l)/2),
       100vw calc(50% - var(--l)/2),
       100vw calc(50% + var(--l)/2),
       100%  calc(50% + var(--l)/2),
       100% 100%,0 100%);

box-shadow: 0 0 0 var(--l) inset var(--c);

input[type="range" i]::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--l) inset var(--c);
  transition: .3s;
}

input[type="range" i]::-moz-range-thumb {
  box-shadow: 0 0 0 var(--l) inset var(--c);
  transition: .3s;
}

input:active::-webkit-slider-thumb,
input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--s) inset var(--c);
}

input:active::-moz-range-thumb,
input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 var(--s) inset var(--c);
}

input[type="range" i]::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--c);
  transition: .3s;
}

input[type="range" i]::-moz-range-thumb {
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--c);
  transition: .3s;
}

input:active,
input:focus-visible {
  --_b:  var(--s);
}

--_c: color-mix(in srgb, var(--c), #000 var(--p,0%));

input:focus-visible,
input:hover{
  --p: 25%;
}

@supports not (color: color-mix(in srgb,red,red)) {
  input {
    --_c: var(--c); /* if no support we keep the color as defined */
  }
}