Меню
Спросить
*.{ }

Input type range. Стилизация.

27 сентября 2017
Input type range. Стилизация.

Всем привет, решил написать статью о том как можно стилизовать элемент html 5 input с типом range, этакий ползунок, удобный и современный. Так же покажу как работать с ним через JavaScript, на примере JQuery. Хочу сразу сказать, со стилизацией проблем практически не возникает, но вот если тебе нужно еще и какие то действия с ним выполнять, тут есть подводные камни о которых я расскажу ниже. Некоторые решение есть, но как только будут основные решения я обязательно дополню статью. Поехали =)

input type range html

Для начала давай просто напишем код html, я добавлю два input с типом range, один будет показан как изначальный вид в браузере а другой мы будем менять и зададим ему сразу класс .range:

  1. <!doctype html>
  2. <html lang="ru">
  3.     <head> <title>RANGE</title>
  4.         <link type="text/css" rel="stylesheet" href="style.css">
  5.         <script type="text/javascript" src="jquery.js"></script>
  6.         <script type="text/javascript" src="script.js"></script>
  7.     </head>
  8.     <body>
  9.         <div class="wrp">
  10.             <input type="range" min="0" max="100" value="25">
  11.             <input type="range" min="0" max="100" value="25" class="range">
  12.         </div>
  13.     </body>
  14. </html>

Я уже создал файл для написание кода JS, файл с таблицами стилей и подключил библиотеку JQuery. У обоих инпутов одинаковые максимальны и минимальные значения, а так же начальное значение установил на 25.
Открываем файл со стилями и сразу задам стили для html, body и блока с классом .wrp:

  1. html, body {
  2.     width:100%;
  3.     height:100%;
  4.     padding:0;
  5.     margin:0;
  6. }
  7. .wrp {
  8.     width:700px;
  9.     margin:0 auto;
  10.     margin-top:20px;
  11.     height:70%;
  12. }

input type range полоса и ползунок

Зададим стили для нормальных браузеров типа хрома, тут конечно кому как. Зададим стили для класса .range:

  1. .range {
  2.     -webkit-appearance: none;
  3. }

Тем самым мы как бы обнуляем стандартные стили и можно смело писать свои стили для самой линии трека.

  1. .range{
  2.     -webkit-appearance: none;
  3.     border-radius:2px;
  4.     width:600px;
  5.     height:10px;
  6.     outline : none;
  7.     border:1px solid #D4D4D4;
  8. }

Тут нет ничего сверхъестественного, поэтому каждый делает свой вид линии трека как нравится. Теперь зададим стили для ползунка, та штучка за которую мы тянем или передвигаем как в плеере. Чтобы задать стили для ползунка нужно добавить псевдоэлемент ::-webkit-slider-thumb и так же обнулить стили и дальше делать как нужно нам.

  1. .range::-webkit-slider-thumb{
  2.     -webkit-appearance: none;
  3.     width:18px;
  4.     height:18px;
  5.     background:#D4D4D4;
  6.     border-radius:18px;
  7.     cursor:pointer;
  8.     transition:.1s;
  9. }

Тоже все понятно и просто, единственное кто может не знает про последнее свойство transition, это для задания анимированного перехода между состояниями, то есть у меня будет псевдокласс :hover, и чтобы был плавный переход я добавил это свойство. Давайте добавим :hover, но еще и :active.

  1. .range::-webkit-slider-thumb:hover, .range::-webkit-slider-thumb:active{
  2.     width:24px;
  3.     height:24px;
  4. }

Тоже все просто и гладко. Если мы откроем в хроме или в яндекс браузере к примеру, то все выглядит как нужно. Для остальных же браузеров во всех местах вместе webkit добавляем нужный нам, то есть:
- для мозиллы moz,
- для оперы o,
- для IE ms, но про InternetExplorer поговорим позже. Учитывайте, что стили для каждого браузера придется повторять, иначе если совместить и написать псевдоэлементы через запятую, работать не будет. Ниже я покажу какой псевдоэлемент для кого.

input type range полоса прогресса

Я если честно не знаю как она правильно называется, но это та полоса, которая идет за нашим ползунком когда мы его тянем или передвигаем, это может быть полоса загрузки, процесса, прогресса, индикатор какой-то не знаю в общем, но думаю вы поняли о чем речь, ведь мы с вами на одной волне, если че на картинке ниже она синего цвета :D. Так вот, чтобы ее сделать нужно свойство background или background-image кто как делает.

  1. background:-webkit-linear-gradient(left ,#8870FF 0%,#8870FF 25%,#fff 25%, #fff 100%);

Для браузера Firefox вместо webkit используем moz. Жирным я выделил те места, где мы меняем значения чтобы полоса подвинулась вместе со значением самого инпута. Если сейчас мы будем двигать то полоса двигаться не будет, об этом поговорим позже.
Как и обещал я пишу список какие стили для какого браузера подойдут.

BLink, webkit

Это подходит для хрома, яндекса, оперы и сафари:

  1. Чтобы стилизовать сам трек, достаточно использовать класс, идентификатор или просто имя элемента, то есть псевдоэлементы не нужны.
  2. Для стилизации линии прогресса написано выше.
  3. Для стилизации ползунка нужно добавлять псевдоэлемент ::-webkit-slider-thumb.

Mozilla

Мозилла, тут немного по другому, но тоже просто.

  1. Для стилизации трека добавляем псевдоэлемент ::-moz-range-track
  2. Прогресс выше
  3. Ползунок с псевдоэлементов ::-moz-range-thumb

InternetExplorer

Тут вообще по другому, с ума сойдешь с этими браузерами. В общем IE как бы делит наш инпут на три части, поэтому вот такие правила:

  1. Для стилизации линии трека используем три псевдоэлемента, так как инпут поделен на три части, это ::-ms-track, ::-ms-fill-lower, ::-ms-fill-upper.
  2. Ползунок - ::-ms-thumb

Лично я не тестил на IE, так как после его установки у меня полетела винда и больше я этого не делал, тут буду подправлять что узнаю нового =)

input range JQuery

Вот мы и подошли к этому. Можно работать на нативном JS, можно и с использованием JQuery, кому как удобно.
Тут нет ничего сверхъестественного, работает так же как и с обычным инпутом, например изменим value ползунок подвинется. НО, есть не большое и не приятное но, ползунок подвинется, а вот линия прогресса нет.
Как многие уже догадались, решение является замена css свойств нашего .range

  1. background:-webkit-linear-gradient(left ,#8870FF 0%,#8870FF 25%,#fff 25%, #fff 100%);

Это я уже писал выше, этим и пользуемся.
Схема такая, если мы поставим обработчик события "change" и по нему будем получать value инпута, а затем менять css свойства, то будет работать так: передвигаем ползунок и отпускаем кнопку мыши, затем только передвинется линия.
И это логично, но не совсем красиво, поэтому я предлагаю другое решение.
Открываем файл script.js или пишем в самом html, не важно, и пишем вот такую функцию:

  1. function range(){
  2. var
  3. val = $('.range').val();
  4. $('.range').css({'background':'-webkit-linear-gradient(left ,#8870FF 0%,#8870FF '+val+'%,#fff '+val+'%, #fff 100%)'});
  5.  }

Все просто, тоже самое чтобы мы и делали при событии change, получили value и поменяли стили в нужных местах, только учитывайте, что значения должны быть в процентах, так как у меня в инпуте от 0 до 100, то я ни чего не вычисялю, но если было бы к примеру от 0 до 120, то я бы полученное валуе пропускал бы через формулу (val*100)/120, то есть получал бы процент от числа. Думаю это понятно. Дальше, чтобы это наконец заработало нужно указать в событии oninput элемента инпут данную функцию:

  1. <input type="range" min="0" max="100" value="25" class="range" oninput="range()">

Вот и все, теперь будет работать.
Ну а теперь камни в почках, про которые я говорил в начале.
Известный мне камень на сегодня, так это то, что эта функция не будет работать в мозилле. Почему не будет?
Ответ прост и плавает на поверхности, так как для мозиллы мы можем изменить стили только с помощью псевдоэлемента, а для JavaScript псевдоэлементов в DOM не существует, так и работать мы с ним не можем. Если была бы задача единоразовая, примеру просто поменять цвет, мы могли использовать просто второй класс, но в данном случае ребята я пока ни чего не нашел и не придумал, кто знает пишите =)

input type range. стилизация

Заключение

В принципе это все, но как только приедет вагон с доп.порцией, я обязательно добавлю в статью. Всем спасибо, пока =)

Предыдущая статья