jQueryのUIスライダー非線形で

Question

ステップと、私は同様の質問...（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(""); 
} 

にskobaljicの優れたソリューションを以下のよ彼のフィドルがここhttp://jsfiddle.net/kk7kuy6p/

である私は、その範囲セレクタを必要とします最初の50％は0〜250000、次に50％は3,000,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/

私は2つのマイナーな問題があります。 スケールが64％と78％で奇妙にジャンプしますが、私にはなぜその理由がありません。 また、入力ボックス以外に表示する範囲を取得できません。理想的には、範囲内に配置します。 これはおそらく非常に明白なことですが、Javaは本当に私の強みではありません。

Answer 1

あなたには2つの問題があります。まず、奇妙なジャンプはfloating point problemの結果です。これは、出力番号でMath.floorを呼び出すことで修正できます。

第2に、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(""); 
}