Question

这是我用来制作范围滑块的功能：

function rangeSlider(id, onDrag) {

    var range = document.getElementById(id),
        dragger = range.children[0],
        draggerWidth = 20, // width of your dragger
        down = false,
        rangeWidth, rangeLeft;

    dragger.style.width = draggerWidth + 'px';
    dragger.style.left = -draggerWidth + 'px';
    dragger.style.marginLeft = (draggerWidth / 2) + 'px';

    range.addEventListener("mousedown", function(e) {
        rangeWidth = this.offsetWidth;
        rangeLeft = this.offsetLeft;
        down = true;
        updateDragger(e);
        return false;
    });

    document.addEventListener("mousemove", function(e) {
        updateDragger(e);
    });

    document.addEventListener("mouseup", function() {
        down = false;
    });

    function updateDragger(e) {
        if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
            dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
            if (typeof onDrag == "function") onDrag(Math.round(((e.pageX - rangeLeft) / rangeWidth) * 100));
        }
    }

}


// Run!

rangeSlider('range-slider-1', function(value) {
    document.getElementById('test-result').innerHTML = value + '%';
});

rangeSlider('range-slider-2', function(value) {
    document.getElementById('test-result').innerHTML = value + '%';
});

JSBIN：http://jsbin.com/yuvekecodo/edit?html,js,output

如何以小数形式输出？

例如，如果我将范围设置为10 - 100，我希望它能够包含小数。 10.01,10.02,10.03~99.97。 99.98,99.99等

实现这一目标的最佳方法是什么？

谢谢你们，我几天都在为此烦恼。

干杯。

Thanksl

Answer 1

请尝试这可能有助于获得2位小数点值：

if (typeof onDrag == "function") onDrag(parseFloat(((e.pageX - rangeLeft) / rangeWidth) * 100).toFixed(2));

将其用于：

 function updateDragger(e) {
    if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
        dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
        var startpnt=10,endpnt=50,baseval_percent,baseval;
        baseval_percent = ((e.pageX - rangeLeft) / rangeWidth) * 100;
        baseval = (endpnt-startpnt)*baseval_percent/100;
        baseval = baseval+startpnt;
      if (typeof onDrag == "function") onDrag(parseFloat(baseval).toFixed(2)); 
    }
}

将小数添加到rangelider

1 个答案: