ragne滑块气泡未能随滑块移动而移动

Question

我创建了一个范围滑块，其中我正在显示一个带有滑块值的气泡。

（这个例子是基于https://css-tricks.com/value-bubbles-for-range-inputs/，我只是试图重新创建基于JS）

这里是想使泡沫移动连同滑块功能：

function displayValue(event) { 
    var rangeInput = document.getElementById('myRange'); 
    var width = rangeInput.offsetWidth; 

    var min = rangeInput.getAttribute('min'); 
    var max = rangeInput.getAttribute('max'); 

    var newPoint = (event.target.value - min)/(max - min); 

    var offset = -1.3; 

    var newPlace; 
    if (newPoint < 0) { 
    newPlace = 0; 
    } else if (newPoint > 1) { 
    newPlace = width; 
    } else { 
    newPlace = width * newPoint + offset; 
    offset -= newPoint; 

    } 

    var outputElement = document.getElementById('myOutput'); 
    outputElement.value = event.target.value; 
    outputElement.style.left = newPlace; 
    outputElement.style.marginLeft = offset = "%"; 


} 

此功能只能部分工作（如在气泡更新的价值内幕，但不是位置）

为什么sldier无法更新它的位置？

http://plnkr.co/edit/lt99U0uvMkPsibY54GAU

Answer 1

我发现夫妇在你的代码异常，这可能是错别字。

相反的：

outputElement.style.left = newPlace; 
outputElement.style.marginLeft = offset = "%"; 

尝试：

outputElement.style.left = newPlace + 'px'; 
outputElement.style.marginLeft = offset + "%";