jQuery UI Slider Side Scroll with buttons

Modified from http://jqueryui.com/demos/slider/#side-scroll

by achudars

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<div class="demo">
    
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
    <div class="scroll-content">
        <div class="scroll-content-item ui-widget-header">1</div>
        <div class="scroll-content-item ui-widget-header">2</div>
        <div class="scroll-content-item ui-widget-header">3</div>
        <div class="scroll-content-item ui-widget-header">4</div>
        <div class="scroll-content-item ui-widget-header">5</div>
        <div class="scroll-content-item ui-widget-header">6</div>
        <div class="scroll-content-item ui-widget-header">7</div>
        <div class="scroll-content-item ui-widget-header">8</div>
        <div class="scroll-content-item ui-widget-header">9</div>
        <div class="scroll-content-item ui-widget-header">10</div>
        <div class="scroll-content-item ui-widget-header">11</div>
        <div class="scroll-content-item ui-widget-header">12</div>
        <div class="scroll-content-item ui-widget-header">13</div>
        <div class="scroll-content-item ui-widget-header">14</div>
        <div class="scroll-content-item ui-widget-header">15</div>
        <div class="scroll-content-item ui-widget-header">16</div>
        <div class="scroll-content-item ui-widget-header">17</div>
        <div class="scroll-content-item ui-widget-header">18</div>
        <div class="scroll-content-item ui-widget-header">19</div>
        <div class="scroll-content-item ui-widget-header">20</div>
    </div>
    <button class="left">&larr;</button>
    <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
        <div class="scroll-bar"></div>
    </div>
    <button>&rarr;</button>
</div>
    
    <p>Holding down buttons will repeat the scroll</p>
    
</div>

CSS

.demo, .demo-description {
    width:500px;
    margin:0 auto;
}

.demo p {
    text-align: center;
}

#demo-frame > div.demo {
    padding:10px !important;
}

.scroll-pane {
    overflow:auto;
    width:99%;
    float:left;
    margin: 20px auto;
}

.scroll-content {
    width:2440px;
    float:left;
}

.scroll-content-item {
    width:100px;
    height:100px;
    float:left;
    font-size:3em;
    line-height:96px;
    text-align:center;
    margin:10px;
}

* html .scroll-content-item {
    display:inline;
}

.scroll-pane button.ui-button {
    float:left;
    height:2.1em;
    margin:0 2px;
}

.scroll-bar-wrap {
    float:left;
    width:75%;
    margin:0 -1px -1px;
    padding:0 4px 0 2px;
}

.scroll-bar-wrap .ui-slider {
    background:none;
    border:0;
    height:2em;
    margin:0 auto;
}

.scroll-bar-wrap .ui-handle-helper-parent {
    position:relative;
    width:100%;
    height:100%;
    margin:0 auto;
}

.scroll-bar-wrap .ui-slider-handle {
    top:.2em;
    height:1.5em;
}

.scroll-bar-wrap .ui-slider-handle .ui-icon {
    position:relative;
    top:50%;
    margin:-8px auto 0;
}

JavaScript

// Modified from http://jqueryui.com/demos/slider/#side-scroll
$(function() {
    //scrollpane parts
    var scrollSpeed = 150, // time in ms to delay (smaller is faster)
        scrollPane = $(".scroll-pane"),
        scrollContent = $(".scroll-content"),
        repeat, p = scrollPane.width(),
        c = scrollContent.width(),
        iw = $(".scroll-content-item").outerWidth(true),

        // repeat scroll while holding down button
        repeater = function(b) {
            scrollContent.css("margin-left", function(i, v) {
                var v = parseInt(v, 10) + (b ? iw : -iw);
                v = v < -c + p ? -c + p : v > 0 ? 0 : v;
                return v + 'px';
            });
            resetValue();
            repeat = setTimeout(function() {
                repeater(b);
            }, scrollSpeed);
        };

    // make buttons
    scrollPane.find('button').button().bind('mousedown', function() {
        repeater($(this).is('.left'));
    }).bind('mouseup mouseleave', function() {
        clearTimeout(repeat);
    });

    //build slider
    var scrollbar = $(".scroll-bar").slider({
        slide: function(event, ui) {
            if (c > p) {
                scrollContent.css("margin-left", Math.round(
                ui.value / 100 * (p - c)) + "px");
            } else {
                scrollContent.css("margin-left", 0);
            }
        }
    });

    //append icon to handle
    var handleHelper = scrollbar.find(".ui-slider-handle").mousedown(function() {
        scrollbar.width(handleHelper.width());
    }).mouseup(function() {
        scrollbar.width("100%");
    }).append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>").wrap("<div class='ui-handle-helper-parent'></div>").parent();

    //change overflow to hidden now that slider handles the scrolling
    scrollPane.css("overflow", "hidden");

    //size scrollbar and handle proportionally to scroll distance

    function sizeScrollbar() {
        var remainder = c -...