Advanced demo

Non standard ways of using and customising Ion.RangeSlider

Customising Grid

Manipulate the grid using build in parameters

        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

        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

        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

        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'
        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