Basic demo

Learn how to use Ion.RangeSlider on several practical demos

Simple start, basic params

Set min value, max value and start point


    $("#demo_0").ionRangeSlider({
        min: 100,
        max: 1000,
        from: 550
    });

Set type to double, specify range, show grid and add a prefix "$"


    $("#demo_1").ionRangeSlider({
        type: "double",
        grid: true,
        min: 0,
        max: 1000,
        from: 200,
        to: 800,
        prefix: "$"
    });

Set up range and step

Set up range with negative values


    $("#demo_2").ionRangeSlider({
        type: "double",
        grid: true,
        min: -1000,
        max: 1000,
        from: -500,
        to: 500
    });

Add a step to previous config


    $("#demo_3").ionRangeSlider({
        type: "double",
        grid: true,
        min: -1000,
        max: 1000,
        from: -500,
        to: 500,
        step: 250
    });

Force fractional values, using fractional step 0.1


    $("#demo_4").ionRangeSlider({
        type: "double",
        grid: true,
        min: -12.8,
        max: 12.8,
        from: -3.2,
        to: 3.2,
        step: 0.1
    });

Using array of custom values

Set up you own numbers


    var custom_values = [0, 10, 100, 1000, 10000, 100000, 1000000];
    
    // be careful! FROM and TO should be index of values array
    var my_from = custom_values.indexOf(10);
    var my_to = custom_values.indexOf(10000);
    
    $("#demo_5").ionRangeSlider({
        type: "double",
        grid: true,
        from: my_from,
        to: my_to,
        values: custom_values
    });

Values array could be anything, even strings


    $("#demo_6").ionRangeSlider({
        grid: true,
        from: new Date().getMonth(),
        values: [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ]
    });

Change visual look of numbers (prettify)

Improve readability of big numbers, like 10000000000 😄


    $("#demo_7").ionRangeSlider({
        skin: "big",
        grid: true,
        min: 1000,
        max: 1000000,
        from: 100000,
        step: 1000,
        prettify_enabled: true,
        prettify_separator: ","
    });

Use your own prettify function to transform numbers whatever you like. For example calculating logarithm of a number


    function my_prettify (n) {
        var num = Math.log2(n);
        return n + " → " + (+num.toFixed(3));
    }
    
    $("#demo_8").ionRangeSlider({
        skin: "big",
        grid: true,
        min: 1,
        max: 1000,
        from: 100,
        prettify: my_prettify
    });

Decorating numbers with prefixes, postfixes and other symbols

Adding currency symbol and + symbol to the maximum number


    $("#demo_9").ionRangeSlider({
        grid: true,
        min: 0,
        max: 100,
        from: 50,
        step: 5,
        max_postfix: "+",
        prefix: "$",
        // postfix: " €/ ₽",
    });

Using prefix and postfix at the same time


    $("#demo_10").ionRangeSlider({
        skin: "round",
        grid: true,
        min: 0,
        max: 100,
        from: 21,
        max_postfix: "+",
        prefix: "Age: ",
        postfix: " years"
    });

Taking care of labels collision


    $("#demo_11").ionRangeSlider({
        type: "double",
        grid: true,
        min: 0,
        max: 100,
        from: 47,
        to: 53,
        prefix: "Weight: ",
        postfix: " million pounds",
        decorate_both: true // false,
        // values_separator: " to "
    });

Manipulating UI

Disable enable any UI elements


    $("#demo_12").ionRangeSlider({
        skin: "big",
        type: "double",
        min: -100000,
        max: 100000,
        from: -100000,
        to: 100000,
        step: 10000,
        grid: true,             // show/hide grid
        force_edges: false,     // force UI in the box
        hide_min_max: false,    // show/hide MIN and MAX labels
        hide_from_to: false,    // show/hide FROM and TO labels
        block: false            // block instance from changing
    });

Study advanced functionality

After basic setup is done - time to go deeper. Learn how to setup you own range slider configuration.

Advanced demos

Simple start Range and Step Custom values Prettify numbers Decorate numbers Manipulating UI