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 + "%";