我正在尝试使用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>