Это может быть чрезмерным упрощением, но вы можете попробовать что-то вроде этого:

Рабочий Пример

JS

// shows values in the demo
var showAmount = function (event, ui) {
    $("#amount").val(ui.value);
    $("#amount2").val(parseInt($('.ui-slider-handle').css('left'), 10));
};
$(function () {
    $("#slider").slider({
        animate: 5000, //slowed down to 5s for demo only, for normal timing set to true
        value: 0,
        min: 0,
        max: 500, // make the max value the same as the width
        slide: showAmount,
        change: showAmount
    });

});

// click to trigger animation to 500
$("#play").click(function () {
    $("#slider").slider("value", 500);
});

// click to set the value of the slider to the handles left position
$("#stop").click(function () {
    $("#slider").slider('option', "value", parseInt($('.ui-slider-handle').css('left'), 10));
});

CSS

#slider {
    width: 500px; /* must match the max value of the slider */

}

Этот метод отчасти зависит от возможности установить максимальное значение слайдера, чтобы оно соответствовало ширине слайдера. Если это не большая проблема, левое положение ручки ползунка будет соответствовать значению ползунка, и вы можете использовать его в качестве значения остановки.

Протестировано и работает в IE9 / 10, Chrome и Браузер firefox.

Вместо анимации вы можете попробовать сбросить / обновить значение слайдера, прикрепив его к интервалу для eg и очистив интервал по щелчку паузы

var myVar = setInterval(function(){myTimer()},100);
var tim=parseInt($('#slider').slider("option", "value"));
function myTimer()
{
jQuery("#slider").slider({value:tim--});


}


$("#pause").click(function() {
      clearInterval(myVar);
      timer = null
});