2017-03-31 60 views
1

這是我使用的功能使得範圍滑塊:添加到小數rangeslider

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

回答

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)); 
    } 
} 
+0

請檢查更新功能,將顯示'startpnt = 10'和'endpnt = 50'值的百分比 – bharat