Горизонтальная полоса прокрутки с фиксированными точками

 var marks = $('#marks span');
marks.each(function(i, el){
    $(el).css('left', (i * 33) + '%');
});
$( "#slider" ).slider({
     value: 1,
     min: 1,
     max: 4,
     step: 1,
     slide: function( event, ui ) {
         marks.removeClass('active');
         marks.eq(ui.value - 1).addClass('active');
     }
});

var values = [0, 20, 50, 100],
    marks = $('#marks span');
for(var i = 0; i < values.length; i++){
    marks.eq(i).css('left', values[i] + '%');
}
var slider = $("#slider").slider(
    {
        slide: function(event, ui) {
            var incLeft = event.which != $.ui.keyCode.RIGHT,
                incRight = event.which != $.ui.keyCode.LEFT;
            slider.slider('option', 'value', findNearest(incLeft, incRight, ui.value));
            return false;
        },
        stop: function( event, ui ) {
            marks.removeClass('active');
            marks.eq(values.indexOf(ui.value)).addClass('active');
        }
    });
function findNearest(incLeft, incRight, value) {
    var nearest = null,
        diff = null;
    for (var i = 0; i < values.length; i++) {
        if ((incLeft && values[i] <= value) || (incRight && values[i] >= value)) {
            var newDiff = Math.abs(value - values[i]);
            if (diff == null || newDiff < diff) {
                nearest = values[i];
                diff = newDiff;
            }
        }
    }
    return nearest;
}