Showcase

Explore real-life range slider implementations

You can use this JSFiddle template to start experimenting with Ion.RangeSlider: https://jsfiddle.net/IonDen/uqs7njp9/. All assets are included.

The readme carries more worked fiddles in its Advanced examples list.

Custom marks on the slider

Sometimes you need to show extra information on the slider, like the marks in this example.
Playground: https://jsfiddle.net/IonDen/tdvxs3zL/


    .showcase__mark {
        display: block;
        position: absolute;
        top: 45px;
        background: #f00;
        transform: rotate(-45deg);
        padding: 1px 3px;
        border-radius: 3px;
        color: #fff;
        margin-left: -10px;
    }


    var $range = $("#example_0");
    var min = 100;
    var max = 1000;
    var marks = [700, 900];
    
    $range.ionRangeSlider({
        skin: "round",
        type: "single",
        min: min,
        max: max,
        from: 300,
        onStart: function(data) {
            addMarks(data.slider);
        }
    });
    
    function convertToPercent(num) {
        return (num - min) / (max - min) * 100;
    }
    
    function addMarks($slider) {
        var html = '';
        var left = 0;
        var left_p = "";
        var i;
    
        for (i = 0; i < marks.length; i++) {
            left = convertToPercent(marks[i]);
            left_p = left + "%";
            html += '<span class="showcase__mark" style="left: ' + left_p + '">';
            html += marks[i];
            html += '</span>';
        }
    
        $slider.append(html);
    }

Bind the slider's value to an external input field

Sometimes you need to drive the slider from your own controls, like the inputs in this example.
Playground: https://jsfiddle.net/IonDen/khngpw3m/

← try editing this field


    var $range = $("#example_1");
    var $input = $("#example_1_input");
    var instance;
    var min = 0;
    var max = 1000;
    
    $range.ionRangeSlider({
        skin: "round",
        type: "single",
        min: min,
        max: max,
        from: 500,
        onStart: function(data) {
            $input.prop("value", data.from);
        },
        onChange: function(data) {
            $input.prop("value", data.from);
        }
    });
    
    instance = $range.data("ionRangeSlider");
    
    $input.on("input", function() {
        var val = $(this).prop("value");
    
        // validate
        if (val < min) {
            val = min;
        } else if (val > max) {
            val = max;
        }
    
        instance.update({
            from: val
        });
    });

Playground: https://jsfiddle.net/IonDen/avcm6wpj/

← try editing these fields


    var $range = $("#example_2");
    var $inputFrom = $("#example_2_input_from");
    var $inputTo = $("#example_2_input_to");
    var instance;
    var min = 0;
    var max = 1000;
    var from = 0;
    var to = 0;
    
    $range.ionRangeSlider({
        skin: "round",
        type: "double",
        min: min,
        max: max,
        from: 200,
        to: 800,
        onStart: updateInputs,
        onChange: updateInputs,
        onFinish: updateInputs
    });
    instance = $range.data("ionRangeSlider");
    
    function updateInputs (data) {
        from = data.from;
        to = data.to;
    
        $inputFrom.prop("value", from);
        $inputTo.prop("value", to);
    }
    
    $inputFrom.on("change", function () {
        var val = $(this).prop("value");
    
        // validate
        if (val < min) {
            val = min;
        } else if (val > to) {
            val = to;
        }
    
        instance.update({
            from: val
        });
    
        $(this).prop("value", val);
    
    });
    
    $inputTo.on("change", function () {
        var val = $(this).prop("value");
    
        // validate
        if (val < from) {
            val = from;
        } else if (val > max) {
            val = max;
        }
    
        instance.update({
            to: val
        });
    
        $(this).prop("value", val);
    });

Time to change the look

Six skins ship with the plugin. Pick the one that fits your design.

Skins

Custom marks Bind to inputs