Свойство clip-path
Свойствоclip-path
в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”)...В этой статье мы покажем, как использовать современные методы CSS для создания привлекательного пользовательского слайдера диапазона, используя только собственный HTML
<input>
элемент.
Ползунки диапазона (<input type="range">
) позволяют пользователям выбирать значение в пределах заданного диапазона, предоставляя альтернативные типы ввода, такие как <input type="number">
.
Стили слайдера диапазона по умолчанию выглядят не очень. Изображение ниже дает представление о том, какой диапазон ползунков, которые мы будем стилизовать, отображаются по умолчанию в Chrome, Firefox и Safari.
<input>
элементы сложно стилизовать. Большинство онлайн-решений для их оформления основаны на JavaScript и некотором загроможденном коде. Что еще хуже, некоторые из этих методов также нарушают доступность элемента.Давайте начнем с анализа структуры элемента ввода диапазона. Это собственный элемент, и каждый браузер имеет свою собственную реализацию таких элементов. В основном у нас есть две разные реализации.
Есть один для браузеров 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 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 { }
Но откуда вы знаете, какой селектор использовать?
Мы просто проверили код ввода с помощью инструментов разработчика браузера, чтобы увидеть селектор, который каждый браузер использует для оформления большого пальца.
Теперь мы собираемся использовать волшебный 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
в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”)...object-fit
для размещения изображений на определенном пространстве и как использовать object-position
для правильного позиционирования в этом пространстве.