Стиль нижнего и верхнего заполнения ввода диапазона HTML5

Как объясняется здесь, IE позволяет моделировать нижнюю и верхнюю области заполнения или дорожки в CSS следующим образом:

/* The following only affects the range input in IE */

input[type="range"]::-ms-fill-lower {
  background-color: red; 
}

input[type="range"]::-ms-fill-upper {  
  background-color: blue;
}

<input type="range">

Ответ 1

Прежде всего, прочитайте статью "Вкладыши с поддержкой совместимого диапазона для браузера с CSS" Даниила Стерна. Его идея состоит в том, чтобы сделать вход невидимым, а затем применить пользовательские стили.

Он также разработал отличный онлайн-инструмент под названием randge.css, в котором вы выбираете пресет стиля и параметры и получаете автоматически сгенерированный CSS-код, например, следующий:

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}

<input type="range">

Ответ 2

Есть (newish?) псевдоэлемент для Firefox, который стилирует (что IE вызывает) "нижнюю" часть ввода диапазона. Согласно документации:

Псевдоэлемент CSS :: - moz-range-progress представляет часть "дорожки" (паз, в котором указатель aka thumb slides) a <input> типа = "range", что соответствует значениям ниже значение, выбранное в данный момент большим пальцем.

Для верхней дорожки вы по-прежнему используете (за ответ Александра Даяна) ::-moz-range-track.

Я только что обнаружил и попробовал это сегодня; работает очень хорошо.

Ответ 3

На этом этапе до сих пор нет возможности для собственной реализации -ms-fill-lower или -moz-fill-lower в Chrome. Манипуляция элементом ввода диапазона с RangeSlider.js не была вариантом, поэтому я использовал технику настройки с линейными градиентами CSS и немного javascript для запуска css изменения в диапазоне перемещения большого пальца Надеюсь, это поможет кому-то проверить пример на Codepen

Ответ 4

Я использую следующий код, который был основан на ссылке, предоставленной А. Даяном. Принимая во внимание значения min-max и, в частности, для webkit, также скрывая, что это фактически градиент.

<html>
<head>
    <title>A styled slider</title>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

    <style type="text/css">
        input[type='range'] {
            -webkit-appearance: none;
            width: 100%;
            border-radius: 4px;
            height: 5px;
            border-color: #1f1f1f; 
            border-style: solid; 
            border-width: 1px;
            background: -webkit-linear-gradient(left, green 0%, green 50%, black 50%);
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            -webkit-border-radius: 2px;
            background-color: blue;
            height: 21px;
            width: 9px;
        }

        input[type=range]:focus {
            outline: none; 
        }
    </style>


</head>
<body>
    <div>
      <input type="range" value="75" min="100" max="300" />
    </div>
    <script type="text/javascript" >
        $('input[type="range"]').on('input', function () {
            var percent = Math.ceil(((this.value - this.min) / (this.max - this.min)) * 100);
            console.log(this.min);
            $(this).css('background', '-webkit-linear-gradient(left, green 0%, green ' + percent + '%, black ' + percent + '%)');
        });
    </script>
</body>
</html>