javascript - 相对于输入 [type=range] 的绝对定位 - 不工作

Question

我创建了一个范围 slider ，在 Stackoverflow 的帮助下，工具提示几乎正确地跟随 slider 。我遇到的问题是工具提示并不总是在 slider 拇指上方居中。特别是当您将 slider 从右侧向左移动时。

https://codepen.io/stinkytofu3311/pen/gWYBWb

我已经研究过这到底是怎么回事，我认为这与偏移位置有关。有人有这方面的经验吗？

// Tool Tip
$(document).mousemove(function(e){   
    if(moveit){
            var parentOffset = $('#range-slider').parent().offset(); 
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;
            var step = $('#range-slider').width()/5; 
            valS = $('#range-slider').val();
            if(val != valS){
              val = $('#range-slider').val();
              console.log(val);
              console.log(step * val);
              var xxx = relX + step;
              console.log(relY);
              console.log(relX);
            }
            //console.log(relX);
            $('#sliderPrice').css('top', parentOffset.top-350).css('left',xxx-120);
            //console.log($("#range-slider").val());
    }
  });

Answer 1

我已经更新了您的工具提示移动功能。您不再需要 step 变量，我创建了一个新变量 offsetLeft 来代替 xxx。

有一个新的 if 语句将检查 valS 是否小于或等于 val 如果是，我们加回偏移量工具提示的宽度。

此外，如果两个值不匹配并更新 val 变量，我们只会移动工具提示。

希望这对您有所帮助!

编辑

您还会注意到新的 .css() 函数调用正在使用一个对象，而不是再次调用 .css()。

// Tool Tip
$(document).mousemove(function(e){   
    if(moveit){
            var parentOffset = $('#range-slider').parent().offset(); 
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;
            var step = $('#range-slider').width()/5;
            var leftOffset = (relX - 120);
            valS = $('#range-slider').val();
            if(val != valS){
              if ( valS >= val ) {
                leftOffset += 120;
              }
              val = $('#range-slider').val();
              $('#sliderPrice').css({
                'top': parentOffset.top-350,
                'left': leftOffset
              });
            }
            //console.log(relX);
            //$('#sliderPrice').css('top', parentOffset.top-350).css('left',leftOffset);
            //console.log($("#range-slider").val());
    }
  });