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.

jQuery TOOLS 1.2.6 Rangeinput. HTML5 ranges for humans.

standalone demo

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.

<!-- 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" />

HTML

Rangeinput initialization

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
 
});

JavaScript

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.