我正在尝试使用Cordova创建一个远程控制应用程序.

应该有2个垂直滑块(带有我的自定义(高度,宽度,颜色等).一个应位于左侧,位于页面宽度的25%;另一个位于右侧,位于75%的页面宽度.

滑块也应该以正确的点为中心(例如calc(25% - 20px);,如果宽度为40px,它将是左侧滑块).

唯一的另一个要求是这个网页适用于iOS Safari(真的是Cordova,但它使用Apple的WebKit基本相同).Opera/Firefox也不错.它不必与IE兼容(欢迎您).

我不介意使用Javascript/jQuery,但我更喜欢CSS.

此外,由于原因不明,滑块会从页面顶部移开,必须修复.我目前拥有的最后一个错误是应用于position: fixed; left: 0px;滑块不会将其完全移动到左侧,因此该centerInViewport()函数是偏移的.

这是一个JSFiddle:https://jsfiddle.net/Coder256/6zjnk3qt/

我已经试过了-webkit-appearance: slider-vertical.它不允许造型.对于滑块,-webkit-appearance除了none我尝试过的任何价值之外的任何价值都不会让你有任何风格.

更新:对不起,如果我不清楚.问题是:如何在保持自定义的同时正确定位滑块,正确地离页面不太远,如上所述在正确的x位置？

诀窍是设置margin-top滑块宽度的一半,以防止滑块离页面太远.

x位置的原理相同.使用calc设置left到25%/ 75%减去一半的滑块宽度,以获得正确的位置.

html, body {margin: 0; padding: 0; width: 100%; height: 100%}

h1 {
  text-align: center;
}

.app {
  width: 100%;
}

.sliders {
  position: relative;
}

input[type=range].vslider {
  -webkit-appearance: none;
  transform: rotate(270deg) translateY(-50%);
  margin-top: 200px; /* 50% of the width because of the transformation */
  width: 400px;
  height: 40px;
  outline: none;
  position: absolute;
}

input[type=range].vslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #777;
  opacity: 0.75;
  width: 25px;
  height: 40px;
  transform: translateY(-10px);
}

input[type=range].vslider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background-color: #444;
  color: #444;
  height: 20px;
  width: 400px;
}

#LSlider {
  left: calc(25% - 200px); /* 50% of the width because of the transformation */
}

#RSlider {
  left: calc(75% - 200px); /* 50% of the width because of the transformation */
}

  
RC Car Test