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 included

Custom marks on slider

Sometimes you will need to show some extra information on the slider, this technique will help you do it.
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 sliders value to external input field

Sometimes you will need to manipulate rage slider with external controls, you can do it with this technique.
Playground: https://jsfiddle.net/IonDen/khngpw3m/

← try edit 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 edit this 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 visual look

Review and enjoy different skins you can use to change sliders visual look

Skins

Custom marks Bind to inputs