Question

是否存在一种本机方式将当前范围值直接附加到HTML范围缩略图的当前位置上方（即，追赶当前缩略图位置的值）？我目前有一个简单的公式，可以通过将当前值占总值的百分比乘以滑块的宽度来更新位置：

updatePosition() {
  const { currentValue, rangeMax, rangeMin } = this.props;
  const sliderWidth = document.getElementsByClassName(className)[0].clientWidth;
  const newPosition = (currentValue - rangeMin) / (rangeMax - rangeMin);
  const updatedPosition = (sliderWidth * newPosition) - 30; // subtracting 30 to help align over slider thumb

  this.setState({ updatedPosition });
}

，然后通过内嵌样式将该"updatedPosition"值作为包含该值的"left"的{{1}}属性传递。

它目前可以使用，但有时会有些滞后，尤其是在IE中，因此我想知道是否有更精确的方法来获取/更新值的位置。宁愿不使用包裹。谢谢！

Answer 1

您应该调整功能以使用getBoundingClientRect()。此函数返回一个具有窗口坐标作为属性的对象。

var pos = element.getBoundingClientRect();
console.log(pos.top)

记录元素顶部的Y坐标。

可以在http://javascript.info/coordinates上找到很好的参考/解释。

Answer 2

我最终使用的是

This is the code（不是我的代码）。对于我需要做的事情效果很好。我显然对其做了些微修改以使其特定于React，但其他方面还是按原样使用了。

$('input[type="range"]').on('input', function() {

  var control = $(this),
    controlMin = control.attr('min'),
    controlMax = control.attr('max'),
    controlVal = control.val(),
    controlThumbWidth = control.data('thumbwidth');

  var range = controlMax - controlMin;

  var position = ((controlVal - controlMin) / range) * 100;
  var positionOffset = Math.round(controlThumbWidth * position / 100) - (controlThumbWidth / 2);
  var output = control.next('output');

  output
    .css('left', 'calc(' + position + '% - ' + positionOffset + 'px)')
    .text(controlVal);

});

将当前范围号附加在HTML范围滑块的正上方

2 个答案: