JQuery用戶界面滑蓋非線性步驟

Question

我下面skobaljic的優秀的解決方案，以一個類似的問題...（JQuery UI Slider with Non-linear/Exponential/Logarithmic steps）

var slider = $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    step: 1, 
    values: [10, 80], 
    slide: function (event, ui) { 
     $("#amount").val("RM " + commafy(ui.values[0]) + " to RM " + commafy(ui.values[1])); 
    } 
}); 
$("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) + 
    " to RM " + commafy($("#slider-range").slider("values", 1))); 

function commafy(val) { 
    /* Total range 0 - 2,500,000 */ 
    /* 70% from 25,000 to 200,000, what have left (2,325,000) share left (25,000) and right (2,300,000) */ 
    /* So, final dividing */ 
    var toPresent = 0; 
    if (val < 50) { 
     toPresent = (val/50) * 25000; 
    } else { 
     toPresent = 250000 + (val - 50)/50 * 2750000; 
    }; 
    return String(toPresent).split("").reverse().join("") 
     .replace(/(.{3}\B)/g, "$1,") 
     .split("").reverse().join(""); 
} 

他的小提琴是這裏http://jsfiddle.net/kk7kuy6p/

我需要一個範圍選擇器前50％從0到250000，然後在第二個50％到300,000。我已經調整了代碼，一切都很好 - 主要是。

var slider = $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    step: 1, 
    values: [64, 78], 
    slide: function(event, ui) { 
    $("#amount").val("£ " + commafy(ui.values[0]) + " - £ " + commafy(ui.values[1])); 
    $("#newpricemin").val(commafy(ui.values[0])); 
    $("#newpricemax").val(commafy(ui.values[1])); 

    } 
}); 
$("#amount").val("£ " + commafy($("#slider-range").slider("values", 0)) + 
    " - £ " + commafy($("#slider-range").slider("values", 1))); 

function commafy(val) { 
    /* Total range 0 - 3,000,000 */ 
    /* 50% from 0 to 250,000, what have left (2,750,000) */ 
    /* So, final dividing */ 
    var toPresent = 0; 
    if (val < 50) { 
    toPresent = (val/50) * 250000; 
    } else { 
    toPresent = 250000 + (val - 50)/50 * 2750000; 
    }; 
    return String(toPresent).split("").reverse().join("") 
    .replace(/(.{3}\B)/g, "$1,") 
    .split("").reverse().join(""); 
} 

我的小提琴http://jsfiddle.net/10231kq7/6/

我有兩個小問題。 規模跳躍64％和78％奇怪，但我不知道爲什麼。 此外，我不能在任何其他任何輸入框顯示範圍 - 理想情況下，我希望它在一個跨度。 這可能是非常明顯的，但Java真的不是我的強項，任何幫助將不勝感激。

Answer 1

你有兩個問題。首先，奇怪的跳躍是floating point problem的結果。這可以通過在輸出數字上調用Math.floor來解決。

其次，你在jquery中使用.val（）命令。要編輯的跨度，你需要使用的.text（）

如下：

var slider = $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    step: 1, 
    values: [64, 78], 
    slide: function(event, ui) { 
    $("#amount").text("£ " + commafy(ui.values[0]) + " - £ " + commafy(ui.values[1])); 
    $("#newpricemin").val(commafy(ui.values[0])); 
    $("#newpricemax").val(commafy(ui.values[1])); 

    } 
}); 
$("#amount").val("£ " + commafy($("#slider-range").slider("values", 0)) + 
    " - £ " + commafy($("#slider-range").slider("values", 1))); 

function commafy(val) { 
    /* Total range 0 - 3,000,000 */ 
    /* 50% from 0 to 250,000, what have left (2,750,000) */ 
    /* So, final dividing */ 
    var toPresent = 0; 
    if (val < 50) { 
    toPresent = (val/50) * 250000; 
    } else { 
    toPresent = 250000 + (val - 50)/50 * 2750000; 
    }; 
    toPresent=Math.floor(toPresent); 
    return String(toPresent).split("").reverse().join("") 
    .replace(/(.{3}\B)/g, "$1,") 
    .split("").reverse().join(""); 
}