获取HTML5范围滑块手柄的偏移位置 [英] Get the offset position of an HTML5 range slider handle

问题描述

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

Is there any way to get the pixel position of the slider handle of an HTML5 range input ?

<input type="range" id="combicalc_contribution-slider" min="1" max="50" value="25">

我尝试使用max，min&值计算出沿轨道"的百分比，但是计算得出的值在较低的值向左变化，在较高的值向右变化.

I have tried calculating the position using a combination of max, min & value to work out the percentage 'down the track' but the calcualted value varies to the left at lower values and the right at higher values.

这是代码:

var sliderWidth = slider[0]['clientWidth'];
var sliderPos = slider[0]['valueAsNumber'] / slider[0]['max'];
jQuery(id).closest('.sliderContainer').append('<div class="sTt">' + val + '</div>');
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});

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

The overall aim is to place a 'tooltip' above the slider handle as it moves with the value in it.

这是 jsFiddle ，它突出了这个问题

Here's a jsFiddle which highlights the issue

推荐答案

尝试一下

val = slider.val();

// Measure width of slider element. adjust by 15 to account for padding/border
width = slider.width() - 15;

// Calculate percentage between left and right of input
min = slider.attr('min');
max = slider.attr('max');
percent = (val - min) / (max - min);

// Janky value to get pointer to line up better
offset = -3;

// the position of the output
newPosition = width * percent + offset;

slider.next('output')
  .css({left: newPosition})
  .text(val);

改编自此处

这篇关于获取HTML5范围滑块手柄的偏移位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！