RangeInput slider

Slideshow controled with rangeinput

by Leandro Barbosa

HTML

<script src="http://cdn.jquerytools.org/1.2.7/form/jquery.tools.min.js"></script>
<!-- our scrollable element -->
<div id="scrollwrap">
    <ul id="scroll">
        <li>A</li><!--
        --><li>B</li><!--
        --><li>C</li><!--
        --><li>D</li><!--
        --><li>E</li>
    </ul>
</div>
<!-- rangeinput that controls the scroll -->
<input type="range" min="0" max="400" step="100" value="0" />

CSS

/* outermost element for the scroller (stays still) */
 * {
    box-sizing: border-box;
}
#scrollwrap {
    position:relative;
    overflow:hidden;
    width: 450px;
    height:150px;
    border:1px solid #000;
    margin-bottom:15px;
}
/* the element that moves forward/backward */
 #scroll {
    position:absolute;
    white-space: nowrap;
}
#scroll li {
    padding:20px;
    border: 1px red solid;
    font:bold 30px sans-serif;
    height:50px;
    color:#fff;
    text-shadow:1px 2px 2px #000;
    width: 100px;
    display: inline-block;
}
.slider {
    position:relative;
    cursor:pointer;
    height:1px;
    border:2px solid #00118E;
    width:450px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
.progress {
    background-color:#00118E;
    height:3px;
    position:absolute;
    width:0;
}
.handle {
    border:1px solid #cfcfcf;
    background-color:#fff;
    height:20px;
    width:80px;
    position:absolute;
    top:-12px;
    display:block;
    cursor:move;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
}
.handle:active {
    background:blue;
}
.range {
    display:none;
}
/* get rid of those system borders being generated for A tags */
 a:active {
    outline:none;
}
:focus {
    -moz-outline-style:none;
}
body {
    margin:20px;
}

JavaScript

// get handle to the scrollable DIV
 var scroll = $("#scroll");

 // initialize rangeinput
 $(":range").rangeinput({

     // slide the DIV along with the range using jQuery's css() method
     onSlide: function (ev, step) {
         scroll.css({
             left: -step
         });
     },

     // display progressbar
     progress: false,

     // initial value. also sets the DIV's initial scroll position
     value: 1,

     // this is called when the slider is clicked. we animate the DIV
     change: function (e, i) {
         scroll.animate({
             left: -i
         }, "fast");
     },

     // disable drag handle animation when when slider is clicked
     speed: 0

 });