jQuery UI Slider – non-linear step values for range fixed minimum

OK, I have tried this answer:
JQuery Slider, how to make "step" size change

But it’s for dual sliders, and doesn’t meet my needs.

I have a ranged (fixed minimum) slider, where I have the following steps:

5, 10, 20, 50, 100, 150

I’m ignoring the min range, and just needing the values from the steps.

Additionally, creative wants the steps to be non-linear:

range slider

So I have to create steps at the ticks in the image.

I’ve tried various ways shown in stackoverflow, but unable to come up with a feasible answer.

Any help would be appreciate. Thanks.

$  (function() {
    $  ( "#parkSlider" ).slider({
        range: "min",
        value: 50,
        min: 0,
        max: 150,
        step: 10,
        slide: function( event, ui ) {
            $  ( "#amount" ).val( "$  " + ui.value );
        }
    });
    $  ( "#amount" ).val( "$  " + $  ( "#slider-range-min" ).slider( "value" ) );
});

newest questions tagged jquery – Stack Overflow

About Admin