Advanced demo

    $("#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)
    });
    

    $("#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
    });
    

    $("#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
    });
    

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

    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
    });
    

    $("#demo_5").ionRangeSlider({
        skin: "big",
        type: "double",
        min: 0,
        max: 100,
        from: 20,
        to: 80,
        min_prefix: "From: ",   // prefix shown only on the MIN label
        max_prefix: "Up to: "   // prefix shown only on the MAX label
    });
    

    window.global_prettify_demo = function (n) {
        return n + "°";
    };
    
    $("#demo_6").ionRangeSlider({
        skin: "big",
        min: 0,
        max: 40,
        from: 21,
        prettify: "global_prettify_demo"   // string names a window function; data-prettify accepts the same string
    });
    

    function weight_tier_prettify (v) {
        return typeof v === "number" ? v + " kg" : v;
    }
    
    $("#demo_7").ionRangeSlider({
        skin: "big",
        grid: true,
        values: [1, 5, 10, 25, "Ask for a quote"],
        from: 4,
        prettify: weight_tier_prettify,
        prettify_all_values: true   // also run prettify on the non-numeric "Ask for a quote" entry
    });
    

    function shrink_to_k (n) {
        return (n / 1000) + "k";
    }
    
    function label_limit (n) {
        return "Limit " + n;
    }
    
    $("#demo_8").ionRangeSlider({
        skin: "big",
        type: "double",
        grid: true,
        min: 0,
        max: 1000000,
        from: 250000,
        to: 750000,
        prettify_grid: shrink_to_k,      // formats grid tick labels only
        prettify_min_max: label_limit    // formats the MIN and MAX labels only
    });
    

    function output_limits (data, $output) {
        var result = '
from_min: ' + data.from_min + '
';
        result +=   '
from_max: ' + data.from_max + '
';
        result +=   '
to_min: ' + data.to_min + '
';
        result +=   '
to_max: ' + data.to_max + '
';
    
        $output.html(result);
    }
    
    var $d9 = $("#demo_9");
    var $output9 = $(".js-output__d9");
    $d9.ionRangeSlider({
        skin: "big",
        type: "double",
        min: 0,
        max: 100,
        from: 20,
        to: 80,
        from_min: 10,
        from_max: 40,
        to_min: 60,
        to_max: 90,
        onStart: function (data) {
            output_limits(data, $output9);
        },
        onChange: function (data) {
            output_limits(data, $output9);
        },
        onFinish: function (data) {
            output_limits(data, $output9);
        },
        onUpdate: function (data) {
            output_limits(data, $output9);
        }
    });
    

    $("#demo_10").ionRangeSlider({
        skin: "big",
        type: "double",
        min: 0,
        max: 100,
        from: 30,
        to: 70,
        drag_over_limit: true   // dragging a handle past its neighbour pushes the neighbour along
    });
    

    $("#demo_11").ionRangeSlider({
        skin: "big",
        type: "double",
        min: 0,
        max: 100,
        from: 30,
        to: 70,
        drag_over_limit: false   // default: dragging a handle stops at its neighbour
    });
    

    function output_ready (data, $output) {
        $output.html('ready: ' + data.from + ' to ' + data.to);
    }
    
    var $d12 = $("#demo_12");
    var $output12 = $(".js-output__d12");
    $d12.ionRangeSlider({
        skin: "big",
        type: "double",
        min: 0,
        max: 100,
        from: 30,
        to: 70,
        onInit: function (data) {
            output_ready(data, $output12);   // runs once, after first render
        }
    });