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

Question

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

当隐藏范围输入被拖动时，自定义div的位置向自定义条的每一端稍微改变，并且不保留在光标顶部。

下面是一个简化的例子和代码：https://jsfiddle.net/Lk9d8gjh/

可以看到，滑块范围值是通过在开始时的手柄的左部分，然后在端部的手柄的右侧部分进行计算。无论如何，我可以改变这个，所以范围值是从手柄的中心计算出来的，因此消除了这种'laggy'的感觉。我期望自定义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 + '%'); 
});