Бонус: Весь LESS код для оформления элементов input с типом range во всех браузерах
Для создания одинаковых элементов input с типом range для каждого браузера требуется большое количество CSS кода. Используя препроцессор, мы сможете значительно повысить эффективность вашей работы. Представленный далее LESS код используется для генерации CSS кода, который мы рассмотрели до этого.
001.@track-color: #424242;002.@thumb-color: #555bc8;003. 004.@thumb-radius: 8px;005.@thumb-height: 30px;006.@thumb-width: 30px;007.@thumb-shadow-size: 1px;008.@thumb-shadow-blur: 1px;009.@thumb-shadow-color: #111;010.@thumb-border-width: 1px;011.@thumb-border-color: white;012. 013.@track-width: 100%;014.@track-height: 10px;015.@track-shadow-size: 2px;016.@track-shadow-blur: 2px;017.@track-shadow-color: #222;018.@track-border-width: 1px;019.@track-border-color: black;020. 021.@track-radius: 5px;022.@contrast: 5%;023. 024..shadow(@shadow-size,@shadow-blur,@shadow-color) {025.box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color, 0px 0px @shadow-size lighten(@shadow-color,5%);026.}027. 028..track() {029.width: @track-width;030.height: @track-height;031.cursor: pointer;032.animate: 0.2s;033.}034. 035..thumb() {036..shadow(@thumb-shadow-size,@thumb-shadow-blur,@thumb-shadow-color);037.border: @thumb-border-width solid @thumb-border-color;038.height: @thumb-height;039.width: @thumb-width;040.border-radius: @thumb-radius;041.background: @thumb-color;042.cursor: pointer;043.}044. 045.input[type=range] {046.-webkit-appearance: none;047.margin: @thumb-height/2 0;048.width: @track-width;049. 050.&:focus {051.outline: none;052.}053. 054.&::-webkit-slider-runnable-track {055..track();056..shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);057.background: @track-color;058.border-radius: @track-radius;059.border: @track-border-width solid @track-border-color;060.}061. 062.&::-webkit-slider-thumb {063..thumb();064.-webkit-appearance: none;065.margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height / 2);066.}067. 068.&:focus::-webkit-slider-runnable-track {069.background: lighten(@track-color, @contrast);070.}071. 072.&::-moz-range-track {073..track();074..shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);075.background: @track-color;076.border-radius: @track-radius;077.border: @track-border-width solid @track-border-color;078.}079.&::-moz-range-thumb {080..thumb();081.}082. 083.&::-ms-track {084..track();085.background: transparent;086.border-color: transparent;087.border-width: @thumb-width 0;088.color: transparent;089.}090. 091.&::-ms-fill-lower {092.background: darken(@track-color, @contrast);093.border: @track-border-width solid @track-border-color;094.border-radius: @track-radius*2;095..shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);096.}097.&::-ms-fill-upper {098.background: @track-color;099.border: @track-border-width solid @track-border-color;100.border-radius: @track-radius*2;101..shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);102.}103.&::-ms-thumb {104..thumb();105.}106.&:focus::-ms-fill-lower {107.background: @track-color;108.}109.&:focus::-ms-fill-upper {110.background: lighten(@track-color, @contrast);111.}112.}Браузерная поддержка
Сам по себе элемент input type=»range» имеет следующую браузерную поддержку: Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+. Это довольно хорошо. Применение собственных стилей для оформления данного элемента не должно по большей части изменить данную браузерную поддержку, если вы будете следовать рекомендациям и коду, написанному в этой обучающей статье.
Вот скриншот демо-примера, иллюстрирующий отображение элемента input с типом range в современных версиях разных браузеров:
Если браузер не поддерживает элемент input type=»range», у вас будет просто отображаться элемент input type=»text», который будет валидным и будет работать.
Полезный инструмент
Возможность для создания кроссбраузерных стилей для элемента input с типом range появилась только в 2014 году, поэтому на данный момент существует не так много инструментов для генерации современных стилей. Инструмент range.css, который я создал, является очень удобным для этих целей.
