有什么办法可以得到pixelHTML5 范围输入的滑块手柄的位置?
<input type="range" id="combicalc_contribution-slider" min="1" max="50" value="25">
我尝试使用最大值、最小值和值的组合来计算位置,以计算出“沿着轨道”的百分比,但计算出的值在较低值时向左变化,在较高值时向右侧变化。
这是代码:
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});
总体目标是在滑块手柄随其中的值移动时在滑块手柄上方放置一个“工具提示”。
这是一个jsFiddle这凸显了这个问题
Try this
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);
改编自here
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)