Блог

Я создаю вертикальный слайдер, используя -moz и -webkit. В Mozilla я объявляю его вертикальным, используя orient=»vertical», и все стили работают нормально. В Chrome, поскольку я использую -webkit-appearance: нет; для стилизации я не могу использовать -webkit-appearance: slider-vertical, это заставляет меня использовать -webkit-transform: поворот (90 градусов);

Проблема в том, что в Mozilla я могу использовать height для объявления реальной высоты слайдера, вместо этого поворачивая его с помощью chrome, я вынужден использовать width.

 #sens[type=range]{
    -webkit-appearance: none;
     height: 220px; //in chrome is width since it is rotated
}
  

Как я могу это решить?

хорошо, я думаю, вам нужно что-то вроде этого.

Для начала вам нужно прочитать о ::-webkit-slider-runnable-track и ::webkit-slider-thumb . link1 и link2 очень полезные свойства.

И теперь вы можете сделать это так:

 input[type=range] {
  -webkit-appearance: none;
  -webkit-transform: rotate(90deg);
  margin-top: 50px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ccc;
  border: none;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: red;
  margin-top: -5px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ddd;
}  

 <input type="range" />