html监听滑块位置,javascript-获取HTML5范围滑块手柄的偏移位置

有什么方法可以获取HTML5范围输入的滑块手柄的像素位置吗？

我尝试使用最大,最小和最大组合来计算位置.值计算出“沿轨道”的百分比,但是计算得出的值在较低的值向左变化,在较高的值向右变化.

这是该代码：

var sliderWidth = slider[0]['clientWidth'];

var sliderPos = slider[0]['valueAsNumber'] / slider[0]['max'];

jQuery(id).closest('.sliderContainer').append('

' + val + '

');

var sTtWidth = jQuery(id).closest('.sliderContainer').find('.sTt').outerWidth(true) / 2;

var ttPos = (sliderWidth * sliderPos);

ttPos = ttPos - sTtWidth;

ttPos = ttPos + 'px';

jQuery('.sTt').css({'left': ttPos});

总体目标是在滑块手柄上移动值时在滑块手柄上方放置一个“工具提示”.

这是jsFiddle,突出显示了问题

解决方法:

这对我有用：

var slider = $("#combicalc_contribution-slider")[0];

var sliderPos = slider.value / slider.max;

var pixelPostion = slider.clientWidth * sliderPos;

//this is your pixel value

console.log(pixelPostion);

在您的示例中,像素值已针对1到50的值正确计算.

标签：html5,javascript

来源： https://codeday.me/bug/20191025/1930364.html