Create A MooTools Slider With Spanning Element

10th September 2008

The MooTools slider is a good little application, and creates a reliable means of adding in a slider tool to a site. However, one thing that the MooTool slider is missing is a block that covers what is on the left hand side of the slider, before the handle.

Before we go into to how to create the tool, I have created an example of the slider. The colours are deliberately garish in order to show the different elements of the slider.

Create a page with the following HTML.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <script type="text/javascript" src="./script/mootools.js"></script>
  6. <link href="./style/slider.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="track1">
  10. <span id="track1span"></span><div id="handle1"><img src="./style/slider/handle.png" id="handle1Image" alt="Drag Me" /></div>
  11. </div>
  12. <p id="test"></p>
  13. <script type="text/javascript" src="./script/slider.js"></script>
  14. </body>
  15. </html>

The slider element has the following structure.

  1. div <- container for the slider
  2. ---span <- the span element
  3. ---div <- handle
  4. ------img <- image to make the handle pretty

You will need to download the MooTools library to run this tool.

Create a style file (called slider.css in a directory called style) and add the following content.

  1. #track1{
  2. width:500px;
  3. padding:0;
  4. margin:0;
  5. height:18px;
  6. background-color: #09f;
  7. }
  8.  
  9. #handle1{
  10. padding:0;
  11. margin:-20px 0 0 0;
  12. width:18px;
  13. height:18px;
  14. }
  15.  
  16. span#track1span{
  17. display:block;
  18. padding:0;
  19. margin:0;
  20. background-color: #222;
  21. height:18px;
  22. width:50%;
  23. }

Now for the important part of the script. Create a file called slider.js in the script directory and add the following code in. I have put lots of comments in here to make it clear what each line is doing.

  1. // set up track array
  2. var handleArr = new Object();
  3. handleArr["track1"]=250; // set initial value
  4.  
  5. // set up effects for the slider
  6. var track1Span = new Fx.Style($('track1span'),'width',{duration:0});
  7.  
  8. var slider1 = new Slider($('track1'),$('handle1'),{
  9. steps:500, // there are 250 steps in the track
  10. offset:0, // offset of zero fits the handle into the track
  11. onChange: function(pos){
  12. track1Span.set(pos);
  13. handleArr['track1'] = parseInt(pos); // store position
  14. updateTestDiv(); // run function to do something
  15. }
  16. }).set(handleArr["track1"]); // set initial position
  17.  
  18. // function to update test tag with handle position
  19. function updateTestDiv(pos){
  20. $('test').innerHTML = handleArr['track1'];
  21. }

All that this slider does is update a p tag with the id of test with the current position of the slider handle.

The ideal thing about this script is that it is fairly easy to add more tracks into it, you just need to duplicate the code slightly to create variables for slider2 and so on.

Add new comment

The content of this field is kept private and will not be shown publicly.