You can use the rangeinput to control other elements too. Here we use it to control scrolling of a DIV. A little more coding and you can present your products like Apple does.
We set the range's maximum value to 2600 with the max attribute. This is the same as the width of the scollable area. The step attribute specifies the size of an individual animation step. Having a value here makes the sliding a bit faster.
<!-- our scrollable element --> <div id="scrollwrap"> <div id="scroll"> jQuery TOOLS 1.2.6 Rangeinput. HTML5 ranges for humans. </div> </div> <!-- rangeinput that controls the scroll --> <input type="range" max="2600" step="10" />
We use the onSlide and change events to control the sliding of the DIV as follows:
// 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: true, // initial value. also sets the DIV's initial scroll position value: 100, // 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 });
You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.
We use this documented CSS file for styling the scrollbar and the slider. The CSS logic is the same as when implementing jQuery Tools scrollables.