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 + '%');
});

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

1 个答案: