在HTML/CSS中自定义和定位垂直滑块

Customizing and positioning a vertical slider in HTML/CSS

本文关键字：定位 垂直 自定义 HTML CSS      更新时间：2023-09-26

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

应该有两个垂直滑块（<input type="range">，根据我的自定义（高度、宽度、颜色等）。一个应该在左边，位于页面宽度的25%；另一个在右边，占页面宽度的75%。

滑块也应该以正确的点为中心（例如，如果左侧滑块的宽度为40px，则为calc(25% - 20px);）。

唯一的另一个要求是这个网页可以在iOS Safari上运行（实际上是Cordova，但它使用的是苹果的WebKit，基本上是一样的）。Opera/FFirefox也不错它不必与IE兼容（不客气）。

我不介意使用Javascript/jQuery，但我更喜欢CSS。

此外，由于无法解释的原因，滑块从页面顶部脱落，必须进行修复。我目前遇到的最后一个错误是，将position: fixed; left: 0px;应用于滑块并不能将其完全向左移动，因此centerInViewport()函数是偏移的。

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

我已经试过-webkit-appearance: slider-vertical了。它不允许造型。对于滑块，除了我尝试过的none之外，任何-webkit-appearance值都不允许设置任何样式。

更新：如果我不清楚，很抱歉。问题是：如何在保持自定义的同时正确定位滑块，正确地位于离页面不远的位置，并位于如上所述的正确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 */
}
<div class="app">
  <h1>RC Car Test</h1>
  <div id="sliders">
    <input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="LSlider" />
    <input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="RSlider" />
  </div>
</div>

相关文章：