Добрый день! Тема сегодняшней рубрики css - стилизация ползунка(поля range). Итак, приступим к рассмотрению!

Для начала создадим ползунок:

<input  type="range" min="0" max="100" value="50" name="range" step="1"/>

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

Зададим ему ширину 200px.

input[type=range]  {
    width: 200px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

Здесь помимо ширины мы указали специальное свойство appearance которое отвечает за базовые стили отображения элемента вашей операционной системы. Значение 'none' указывает на то что мы эти стили сбрасываем. По итогу поле range будет отображаться не полностью. Это нам необходимо чтобы задать свои собственные стили для ползунка. Заметьте что вместе со свойством 'appearance' мы используем вендорные префиксы -webkit - Для браузеров на движке хромиум(google chrome) и -moz - для браузера mozilla firefox. Сразу отмечу что мы нацелены только на современные браузеры без всяких там IE(Internet Explorer).

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

input[type=range]  {
      width: 200px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
      border-radius: 10px/100%;
      height: 7px;
	  border: 1px solid cyan;
      background-color: #fff;
    }
    input[type=range]::-webkit-slider-thumb {
      background: #ecf0f1;
      border: 1px solid cyan;
      border-radius: 10px/100%;
      cursor: pointer;
      width:15px;
      height: 15px;
      -webkit-appearance: none;
      margin-top: -4px;
    }

    input[type=range]::-moz-range-track {
    	border-radius: 10px/100%;
        height: 5px;
    	border: 1px solid cyan;
    	background-color: #fff;
    }
   input[type=range]::-moz-range-thumb {
    	background: #ecf0f1;
    	border: 1px solid cyan;
        border-radius: 10px/100%;
    	cursor: pointer;
    }

Для браузеров webkit(google chrome, chromium) используются псевдоселекторы -webkit-slider-runnable-track, -webkit-slider-thumb, а для mozilla firefox -moz-range-track, -moz-range-thumb.

track - на конце каждого псевдоселектора отвечает за стилизацию полосы ползунка, а thumb за сам элемент ползунка. Отображение в разных браузерах может немного отличаться но в целом по стилистике будет одинаковым. Можете взять пример и поиграться со стилями!

Еще один пример стилизации:

input[type=range]  {
      width: 200px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      overflow: hidden;
      height: 7px;
    }

    input[type=range]::-webkit-slider-runnable-track {
      height: 7px;
      background-color: blue;
    }

    input[type=range]::-webkit-slider-thumb {
      background: #ecf0f1;
      cursor: pointer;
      width:15px;
      height: 15px;
      -webkit-appearance: none;
      margin-top: -4px;
      box-shadow: -200px  0 0 200px  #43e5f7;

    }

    input[type=range]::-moz-range-track {
        height: 7px;
        background-color: blue;
    }


   input[type=range]::-moz-range-thumb {
      background: #ecf0f1;
      cursor: pointer;
      height: 7px;
      border-radius:0px;
      box-shadow: -200px  0px 0px 200px   #43e5f7;
      padding: 0px;
      margin: 0px;
    }

Здесь получили другое отображение ползунка с эффектом выделения выбранного диапазона.

На этом в принципе у меня все. Если статья оказалась для вас полезной, подписывайтесь на группу Вконтакте и переходите на мой канал Youtube.

Всем удачи и здоровья!