Absolute positioning in relation to a input[type=range] - Not Working

Question

I created a range slider, and with the help of Stackoverflow the tool-tip follows the slider almost correctly. The issue i'm running into is that the tool-tip is not always centered above the sliders-thumb. Especially when you move the slider left from the right side.

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

I've researched the heck out of this, and i think it's related to the offset position. Does anybody have experience with this?

// 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

I've updated your Tool Tip move function. You no longer need the step variable and I've created a new variable, offsetLeft in place of xxx .

There's a new if statement that will check if valS is less than or equal to val if it is, we add back the offset of the tool tip's width.

Also, we'll only be moving the tool tip if the two values don't match as well as updating the val variable.

Hope this helps!

Edit

You'll also notice the new .css() function call is using an object rather than calling .css() again.

 // 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()); } });