Как сделать левую сторону ползунка диапазона другим цветом, чем правая сторона ползунка? - PullRequest
Новая
       7

Как сделать левую сторону ползунка диапазона другим цветом, чем правая сторона ползунка?

0 голосов
/ 11 декабря 2018

В поисках информации о том, как изменить цвет ползунка, в зависимости от того, на какой стороне перетаскиваемой части он находится, например, как работает слайдер видеоплеера HTML5.

Я немного осмотрелся иЯ не нашел ничего для чистых JS-решений, только JQUERY, который я не могу использовать.Есть предложения?

1 Ответ

0 голосов
/ 12 декабря 2018

В зависимости от дизайна вы также можете достичь этого с помощью чистого CSS: 

input[type='range'] {
  -webkit-appearance: none;
  background-color: #ddd;
  height: 20px;
  overflow: hidden;
  width: 400px;
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 20px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #333;
  border-radius: 50%;
  box-shadow: -210px 0 0 200px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -1010px 0 0 1000px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type="range"]::-moz-range-track {
  background-color: #ddd;
}
input[type="range"]::-moz-range-progress {
  background-color: #666;
  height: 20px
}
input[type="range"]::-ms-fill-upper {
  background-color: #ddd;
}
input[type="range"]::-ms-fill-lower {
  background-color: #666;
}
<input type="range"/>
Используя это, вы должны знать о вводе width и совпадении с box-shadow ползунка, чтобы быть больше, чем width.Поскольку box-shadow вокруг большого пальца - это то, что дает вид разных цветов с обеих сторон.

Кроме того, поскольку на input используется overflow: hidden, вы не сможете иметь большой палец, чем дорожка.

Следовательно, если конструкция более конкретная, я также могу порекомендовать noUISlider он не использует jQuery

...