A custom scrollbar for a DIV
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.
HTML coding
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.
Rangeinput initialization
We use the onSlide and change events to control the sliding of the DIV as follows:
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.
CSS coding
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.