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

滑块移动时，ragne滑块无法移动

1 个答案: