JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<div id="slider"></div>

CSS

#slider { margin: 100px; background: hotpink; }

JavaScript

$(function () {
    var handlers = [0, 2, 4 , 9, 12];
    $("#slider").slider({
        min: 0,
        max: 12,
        values: handlers,
        slide: function (evt, ui) {
            for (var i = 0, l = ui.values.length; i < l; i++) {
                if (i !== l - 1 && ui.values[i] + 1 > ui.values[i + 1]) {
                    return false;
                }
                else if (i === 0 && ui.values[i] + 1 < ui.values[i - 1]) {
                    return false;
                }
            }
        }
    });
});