JQuery slider N per step

by ostapische

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<p>1 per 2 steps</p>
<p id="slider-range-1-2-values"></p>
<div id="slider-range-1-2"></div>

JavaScript

function setValues(stepIncrease) {
    return function (event, ui) {
        var slider = $("#" + this.id);
        var currentValues = slider.slider("values");
        var step = slider.slider("option")["step"];
        // 2 - can be changed
        if (!(Math.abs(ui.values[0] - currentValues[0]) == stepIncrease * step || Math.abs(ui.values[1] - currentValues[1]) == stepIncrease * step)){
            return false;
        };
        slider.slider("values", ui.values);
        var currentValues = slider.slider("values");
        $("#" + this.id + "-values").html(currentValues[0] + ' ' + currentValues[1]);
    };
};
$(function() {
    $( "#slider-range-1-2" ).slider({
        range: true,
        min: 1,
        max: 10,
        step: 1,
        values: [1, 10],
        slide: setValues(2),
        create: function(event, ui) {
            var slider = $("#" + this.id);
            var currentValues = slider.slider("values");
            $("#" + this.id + "-values").html(currentValues[0] + ' ' + currentValues[1]);
        }
    });
});