Как стиль ввода диапазона HTML5 имеет различный цвет до и после слайдера?

Ответ 1

Решение Pure CSS:

• Chrome: Скрыть переполнение от input[range] и заполнить все пространство, оставшееся до большой палец с цветом тени.
• IE: не нужно изобретать велосипед: ::-ms-fill-lower
• Firefox не нужно изобретать колесо: ::-moz-range-progress

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

<input type="range"/>

Ответ 2

Да, это возможно. Хотя я бы не рекомендовал его, потому что input range на самом деле не поддерживается должным образом всеми браузерами, потому что новый элемент добавлен в HTML5, а HTML5 - только проект (и будет длительным), так что, если учесть стиль, это, возможно, не самый лучший выбор.

Кроме того, вам понадобится немного JavaScript. Я позаботился об использовании библиотеки jQuery, для простоты.

Здесь вы найдете: http://jsfiddle.net/JnrvG/1/.

Ответ 3

Небольшое обновление для этого:

если вы используете следующее, оно будет обновляться "на лету", а не на выводе мыши.

"изменить mousemove", функция "

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>

Ответ 4

Предыдущее решение больше не работает.

В итоге я написал простую функцию, которая упаковывает range в стилизованный контейнер, добавляя полосу, необходимую перед курсором. Я написал этот пример, где легко увидеть два цвета "синий" и "оранжевый", установленные в CSS, чтобы их можно было быстро изменить.

Ответ 5

Теперь он поддерживается с псевдо элементами в каждом из WebKit, Firefox и IE. Но, конечно, в каждом из них разные.: (

См. этот вопрос и/или найдите CodePen под названием prettify <input type=range> #101 для некоторых решений.

Ответ 6

Хотя принятый ответ хорош в теории, он игнорирует тот факт, что большой палец тогда не может быть больше размера дорожки, не будучи отрубленным overflow: hidden. Посмотрите этот кодекс для примера того, как справиться с этим с помощью чуть-чуть JS.

https://codepen.io/saintwycliffe/pen/VBGYXN

Ответ 7

input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

выше код меняет диапазон ввода стиля.....