Question

无论如何，滑块有一个系统，所以顶部阴影永远不会比底部更暗。但是当你向上拖动任何范围时，值为10时，滑块很奇怪，我不明白为什么。（范围隐藏在画布的一侧）wondrin如果有人看到问题吗？

由于

   <input type="range" class="vs1 vs" min="0" max="45" style="left:-89px;top:-12px" id="vs1" />
    <input type="range" class="vs2 vs" min="0" max="45" style="right:-89px;top:-12px" id="vs2" />
    <style>
input {
    font-weight:bold;
    font-family:arial;
    outline:none;
}
input[type=range].vs {
    -webkit-appearance: none;
    background: none;
    width: 200px;
    height:28px;
    -webkit-transform:rotate(90deg);
    margin-top: 97px;
    z-index: 10;
    position: absolute;
    border:1px solid rgba(0, 0, 0, 0);
    opacity:0.4;
    transition-duration: 1s;
}
input[type="range"].vs1::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: black;
    width: 5px;
    height: 15px;
    border-top-right-radius:2em;
    border-top-left-radius:2em;
    position: relative;
    top: 6px;
}
input[type="range"].vs2::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: black;
    width: 5px;
    height: 15px;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;
    position: relative;
    bottom: 7px;
}
input[type=range]:hover.vs {
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
    border:1px solid black;
    opacity:1;
}
input[type=range]:active.vs {
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
    border:1px solid black;
    opacity:1;
}
</style>

Answer 1

你把它标记为jQuery，所以我减少了＆amp;通过实际使用jQuery简化它：

if (~~$('#vs1').val() > ~~$('#vs2').val()) {
    if (qwas == 1) $('#vs2').val($('#vs1').val())
    if (qwas == 2) $('#vs1').val($('#vs2').val())
}

jSFiddle：http://jsfiddle.net/TrueBlueAussie/ZYX8Y/3/

注意：~~将值转换为整数（包括字符串）。更简单和更简单比parseInt（）更快

另一个注意事项：起初我设法轻易破解你的代码，因为嵌套ifs上没有括号......代码维护真的很糟糕。

Answer 2

你不应该直接比较字符串。 value属性为您提供字符串。因此，"1"和"10"并未按您的想法进行比较。

要解决您的问题，请使用：

parseInt(obj.value, 10)

其中obj是您使用document.getElementById()获得的DOM元素。

在您的任务的if()以及get和set中随处使用。

画布上的范围奇怪的错误

2 个答案:

jSFiddle：http://jsfiddle.net/TrueBlueAussie/ZYX8Y/3/