JQuery UI Slider with Non-linear/Exponential/Logarithmic steps

I'm new to Javascript and JQuery, I am trying to use JQuery UI Slider to replace price range dropdown boxes(one for Minimum Price, another for Maximum Price) for one of my sites.

Here is my current code:

$(function() {
var slider = $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 2500000,
    step: 1000,
    values: [ 0, 2500000 ],
    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) {
    return String(val).split("").reverse().join("")
                      .replace(/(.{3}\B)/g, "$1,")
                      .split("").reverse().join("");
}
});

The price range is from 0 to 2500,000. After testing I found out that UX will be better if the slider scales non-linearly as most of the users on my site would search between the 25,000 to 200,000 range.

A very minute portion of the slider should show the 0 to 25000 range, 70% of it showing 25,000 to 200,000 while the rest should show 200,000 and above. I don't want it to snap to fixed values but the steps has to be 1000.

I found two solutions on this site:

1) Logarithmic slider <- The solution wasn't based on the using the JQuery UI slider so I don't really know how to apply into my code.

2) JQuery Slider, how to make "step" size change <- I can't make heads or tails of it after the guy started using truevalues and values as part of the solution. I tr开发者_如何学Goied applying to my code, the slider works fine (Though moved too fast towards the end for my taste) but the text did not show.

Any ideas?

You can take this approach: use slider range 0-100, than calculate values. With html:

<div id="slider-range"></div>
<input id="amount" type="text" size="40" />

and JS:

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 < 10) {
        toPresent = (val / 10) * 25000;
    } else if (val <= 80) {
        toPresent = 25000 + (val - 10) / 70 * 175000;
    } else {
        toPresent = 200000 + (val - 80) / 20 * 2300000;
    };
    return String(toPresent).split("").reverse().join("")
        .replace(/(.{3}\B)/g, "$1,")
        .split("").reverse().join("");
}

Example Fiddle.