Enrique

edit

Slider Controls with Prototype and Scriptaculous

Posted by Enrique Delgado Tue, 11 Dec 2007 13:00:00 GMT

Even though web-based applications have the majority of input elements found in traditional desktop-based ones, once in a while you are going to wish you had input elements that for some reason did not make it to the HTML standards.

One of the input elements I wish were supported by default are draggable slider controls. There is something cool about having a slider to quickly change a setting of a search or a calculation, instead of having to type values on a text box or clicking on drop-down boxes.

Out of the myriad of options I found during a quick Google search, I found these two options to be the most attractive:

• Yahoo UI Slider Control
• Scriptaculous Slider Control

Since I was already using Scriptaculous on the application in question, I decided to stick to that solution. Yahoo’s version is definitely worth a look though. At first glance, Yahoo’s example looks better than the Scriptaculous one, but as you will see we can get the best of both worlds.

One word of warning; even though sliders are a useful control, you should exercise discretion as to not over use them. The truth of the matter is that not everyone is familiar using sliders on the web, and it can quickly become a usability problem if not careful. Good uses for sliders are things like mortgage calculators, search result filter controls, and things of that sort. Do not replace menus or tabs with a slider ;)

Onto the interesting part. In order to use Scriptculous’ sliders, you will need to make sure you are including the library with the slider component. By default, everything is included when you include scriptaculous in the traditional way:

<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

This will load about six components, but it is a good practice to load only those components that you are actually using. In my case, I’ll be using effects and slider so I’m calling Scriptaculous in this fashion:

 <script src="prototype.js" type="text/javascript"></script>
 <script src="scriptaculous.js?load=effects,slider" type="text/javascript"></script>

A Scriptaculous slider consist of two things:

• A “parent” element (typically a DIV) deemed to be the “track” on which a knob will slide.
• A “child” nested element (typically a DIV) that will act as the element to be slided across the length (or height) of the track.

You can create a slider track and controls purely based on CSS code like in the Scriptaculous sample, but I chose to use images within DIV elements to obtain the look of the Yahoo UI slider control. A possible HTML mark-up would be:

 <div id="track1" style="background-image:url(bg-fader.gif); background-repeat:no-repeat; width:209px; height:28px;">
  <div id="handle1" style="background-image:url(thumb-n.gif); background-repeat:no-repeat; width:17px; height:21px; cursor:move;"> </div>
 </div>

In the example above, we have a parent DIV element (the track) with an ID of track1 and a child (the handle) element with an ID of handle1. In this case the width and height of the DIV elements match the track and handle image dimensions.

Here is where the magic comes. Lets make a Slider object to give life to our HTML slider:

 <script type="text/javascript" language="javascript">
  // <![CDATA[
  window.onload = function() {
    new Control.Slider('handle1',
                       'track1',                                  
                       {axis:'horizontal',
                        range: $R(1,5)
                       });
  }
  // ]]>
 </script>

In the example above, we are creating a horizontal slider with a handle element ID of handle1 and a track element ID of track1. The slider possible values range from 1 to 5.

You may have noticed that the code is within the document’s onLoad event. This is because the slider object needs to be created after the track and slider elements have completely loaded. Alternatively, you could place the JavaScript code somewhere after the HTML elements in your document, but it is typically not a good idea to place JavaScript anywhere other than in its own .js file and then calling that file on your document. See my other post about unobstrusive JavaScript.

There are several options you can play with to create many variations of Scriptaculous sliders. For a good reference, check out the slider documentation page.

Download a complete working demo here. Just unzip the file and open the index.html file with your browser. You should see some sliders with different attributes and further examples as to how to get useful data from the sliders :)