獲取懸停輸入類型範圍的值

我想爲視頻播放器創建一個搜索欄。在滑塊上的mousemove我想獲取當前值。我希望ValueHover等於ValueSeeked。我如何驗證我的測試？獲取懸停輸入類型範圍的值

var valueHover = 0; 
 
function calcSliderPos(e) { 
 
    return (e.offsetX/e.target.clientWidth) * parseInt(e.target.getAttribute('max'),10); 
 
} 
 

 
//attach to slider and fire on mousemove 
 
document.getElementById('seekslider').addEventListener('mousemove', function(e) { 
 
    valueHover = calcSliderPos(e).toFixed(2); 
 
    document.getElementById('durtimeText').innerHTML = valueHover; 
 
}); 
 

 
document.getElementById('seekslider').addEventListener('change', function(e) { 
 
    var valueSeeked = e.target.value; 
 
    document.getElementById('seek').innerHTML = valueSeeked; 
 
    document.getElementById('test').innerHTML = valueSeeked === valueHover; 
 
});

<input id="seekslider" type="range" min="0" max="100" value="0" step="0.01" style="width:300px;"> 
 
<br/> 
 
valueHover : <span id="durtimeText"></span><br/> 
 
valueSeeked : <span id="seek"></span><br/> 
 
valueHover expect to be equal valueSeeked : <span id="test"></span><br/>

來源

2016-02-25 user3578870

捕獲mouseup事件上seekslider和分配valueHover價值seekslider

var valueHover = 0; 
 
function calcSliderPos(e) { 
 
    return (e.offsetX/e.target.clientWidth) * parseInt(e.target.getAttribute('max'),10); 
 
} 
 

 
//attach to slider and fire on mousemove 
 
document.getElementById('seekslider').addEventListener('mousemove', function(e) { 
 
    valueHover = calcSliderPos(e).toFixed(2); 
 
    document.getElementById('durtimeText').innerHTML = valueHover; 
 
}); 
 
document.getElementById('seekslider').addEventListener('mouseup', function(e) { 
 
    valueHover = calcSliderPos(e).toFixed(2); 
 
valueHover= valueHover>100?100:valueHover; 
 
    valueHover= valueHover<0?0:valueHover; 
 
    document.getElementById('seekslider').value = valueHover; 
 
    document.getElementById('seek').innerHTML = valueHover; 
 
}); 
 

 
document.getElementById('seekslider').addEventListener('change', function(e) { 
 
    var valueSeeked = e.target.value; 
 
    document.getElementById('seek').innerHTML = valueSeeked; 
 
    document.getElementById('test').innerHTML = valueSeeked === valueHover; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
<input id="seekslider" type="range" min="0" max="100" value="0" step="0.01" style="width:300px;"> 
 
<br/> 
 
valueHover : <span id="durtimeText"></span><br/> 
 
valueSeeked : <span id="seek"></span><br/> 
 
valueHover expect to be equal valueSeeked : <span id="test"></span><br/> 
 
</body> 
 
</html>

來源

2016-02-25 16:16:22

你calcSliderPos功能的偉大工程！ – bakerhumadi

獲取懸停輸入類型範圍的值

回答

相關問題