Advanced demo

Non standard ways of using and customising Ion.RangeSlider

Customising Grid

Manipulate the grid using build in parameters


    $("#demo_0").ionRangeSlider({
        min: 0,
        max: 10000,
        from: 777,
        step: 1,            // default 1 (set step)
        grid: true,         // default false (enable grid)
        grid_num: 4,        // default 4 (set number of grid cells)
        grid_snap: false    // default false (snap grid to step)
    });
    

Lock and restrict handles

Lock handles to prevent moving


    $("#demo_1").ionRangeSlider({
        type: "double",
        min: 0,
        max: 10,
        from: 2,
        to: 8,
        grid: true,
        grid_snap: true,
        from_fixed: false,  // fix position of FROM handle
        to_fixed: false     // fix position of TO handle
    });
    

Limit movement of a handle


    $("#demo_2").ionRangeSlider({
        type: "single",
        min: 0,
        max: 1000,
        from: 500,
        grid: true,
        from_min: 250,      // set min position for FROM handle (replace FROM to TO to change handle)
        from_max: 750,      // set max position for FROM handle
        from_shadow: true   // highlight restriction for FROM handle
    });
    

Manipulating interval

Restrict interval size and/or drag it


    $("#demo_3").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        from: 400,
        to: 600,
        drag_interval: true,
        min_interval: null,
        max_interval: null
    });
    

Working with dates

Restrict interval size and/or drag it


    var lang = "en-US";
    var year = 2018;
    
    function dateToTS (date) {
        return date.valueOf();
    }
    
    function tsToDate (ts) {
        var d = new Date(ts);
    
        return d.toLocaleDateString(lang, {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }
    
    $("#demo_4").ionRangeSlider({
        skin: "big",
        type: "double",
        grid: true,
        min: dateToTS(new Date(year, 10, 1)),
        max: dateToTS(new Date(year, 11, 1)),
        from: dateToTS(new Date(year, 10, 8)),
        to: dateToTS(new Date(year, 10, 23)),
        prettify: tsToDate
    });
    

Study interactions

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

Interactions demos