自定义 HTML5 范围输入和句柄偏移

Question

我有一个自定义范围输入的问题，它会实时更新 div 以进行视频搜索，这可以在 HTML5 video demo 中看到。

当隐藏范围输入被拖动时，自定义 div 的位置向自定义栏的每一端略有变化，并且不会停留在光标上方。

这是一个简化的示例和代码：https://jsfiddle.net/Lk9d8gjh/

您可以看到，滑块范围值是由开头的句柄左侧部分和结尾处的句柄右侧部分计算得出的。无论如何我可以更改它，以便从手柄的中心计算范围值，从而消除这种“滞后”的感觉。我希望自定义 div 始终直接位于光标上方。

我尝试用以下方法改变拇指的宽度：

input[type=range]::-webkit-slider-thumb

但仍然没有运气。下面是简化的自定义范围输入代码。

.slider-track {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: gray;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    background: green;    
}

.slider-input {
    margin: 0;
    padding: 0;
    width: 100%;
}

<div class="slider-track">
    <div class="slider"></div>
    <input class="slider-input" type="range" max="100" min="0"/>
</div>

$('.slider-input').on('input', function(e) {
    $('.slider').width(e.target.value + '%');
});

Answer 1

嗯.. 它肯定不会是完美的，因为我猜它是一种“黑客”，但这接近我认为你想要的。它将绿色条的末端保持在输入句柄的中心。

我认为可能有更好的计算方法来做同样的事情。但我的数学还不够好，我猜我猜不出来:)

https://jsfiddle.net/o3pvv21t/

$('.slider-input').on('input', function(e) {
    var valueOfInput = Number(e.target.value);
    if(valueOfInput < 25) {
        var desiredWidth = valueOfInput + ((1.5/100)*(100-valueOfInput));
    } else if(valueOfInput >= 25 && valueOfInput <= 50) {
        var desiredWidth = valueOfInput + ((0.75/100)*(100-valueOfInput));
    } else if(valueOfInput >= 51 && valueOfInput <= 75) {
        var desiredWidth = valueOfInput - ((0.75/100)*valueOfInput);
    } else {
        var desiredWidth = valueOfInput - ((1.5/100)*valueOfInput);
    }
    $('.slider').width(desiredWidth + '%');
});