自定義HTML5範圍輸入和句柄偏移

我有一個自定義範圍輸入的問題，它實時更新div的視頻搜索，可以在HTML5 video demo中看到。自定義HTML5範圍輸入和句柄偏移

當隱藏範圍輸入被拖動時，自定義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 + '%'); 
});

來源

2015-11-02 Matt Derrick

那麼..它肯定不會是完美的，因爲它有點「黑客」我猜，但這接近我想你想要的。它將綠條的末端保持在輸入句柄的中心。

我認爲可以有更好的方法來計算這個來做同樣的技巧。但我不是在數學不夠好，搞懂這個問題我想:)

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

來源

2015-11-02 21:13:23 Vincent

這不回答我的問題，但在一個非常獨特的方式！這也意味着現在不可能得到0或100的值。我希望能夠簡單地改變手柄的寬度，但似乎不可能。 –

我知道！我尋找更好的解決方案。在我找不到任何東西之後，這個「黑客」就成了下一個最好的想法..（更壞的想法是什麼？）您可以調整計算或在其中添加額外條件以匹配（v <= 1）和（v> = 99）得到零和100。 – Vincent

自定義HTML5範圍輸入和句柄偏移

回答

相關問題