The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range

 
<!--
MooTools is released under the Open Source MIT license, 
which gives you the possibility to use it and modify 
it in every circumstance. 
-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
div.slider {
  width: 200px;
  height: 16px;
  background: #eee;
}
div.slider div.knob {
  background: #000;
  width: 16px;
  height: 16px;
}
div#fontSize {
  height: 50px;
}

div.advanced {
  width: 400px;
  margin: 5px 0;
  background: url(images/slider.png) 0 center repeat-x;
}
div.advanced div.knob {
  background: no-repeat center center;
  cursor: pointer;
}
div#red div.knob {
  background-image: url(images/red.png);
}
div#green div.knob {
  background-image: url(images/green.png);
}
div#blue div.knob {
  background-image: url(images/blue.png);
}  
  
  </style>
  <script type="text/javascript" src="mootools.js"></script>
  <script type="text/javascript">
window.addEvent('domready', function(){
  // First Example
  var el = $('myElement'),
    font = $('fontSize');
  
  // Create the new slider instance
  new Slider(el, el.getElement('.knob'), {
    steps: 35,  // There are 35 steps
    range: [8],  // Minimum value is 8
    onChange: function(value){
      // Everytime the value changes, we change the font of an element
      font.setStyle('font-size', value);
    }
  }).set(font.getStyle('font-size').toInt());
  

  // Second Example
  var el = $('setColor'), color = [0, 0, 0];
  
  var updateColor = function(){
    // Sets the color of the output text and its text to the current color
    el.setStyle('color', color).set('text', color.rgbToHex());
  };
  
  // We call that function to initially set the color output
  updateColor();
  
  $$('div.slider.advanced').each(function(el, i){
    var slider = new Slider(el, el.getElement('.knob'), {
      steps: 255,  // Steps from 0 to 255
      wheel: true, // Using the mousewheel is possible too
      onChange: function(){
        // Based on the Slider values set an RGB value in the color array
        color[i] = this.step;
        // and update the output to the new value
        updateColor();
      }
    }).set(0);
  });
});  
  </script>
  <title>Slider Demo</title>
</head>
<body>
  <h1>Slider</h1>
  <h2>Introduction</h2>
  <p>
    The Slider-Plugin allows you to drag&amp;drop a knob inside an element to set
    a value within a certain range.
  </p>
  <div id="myElement" class="slider">
    <div class="knob">
    </div>
  </div>
  <div id="fontSize">
    Change the value, to change the fontsize.
  </div>
  <br/>
  <br/>
  <div class="help">
    <strong>Why?</strong> This is a nice User-Interface-Element to not just let the user set a value
    by typing into an input field but limiting the range without further needs to check
    the user input (on clientside). With callbacks you can manipulate anything after changing the value.
  </div>
  <h2>Advanced Example</h2>
  <p>
    With the Slider it is damn easy to create stuff like an RGB-Color Selector which actually looks good.
  </p>
  <div id="red" class="slider advanced">
    <div class="knob">
    </div>
  </div>
  <div id="green" class="slider advanced">
    <div class="knob">
    </div>
  </div>
  <div id="blue" class="slider advanced">
    <div class="knob">
    </div>
  </div>
  <span class="b">Selected color: </span>
  <span id="setColor"></span>
</body>
</html>
Related examples in the same category

Fx.Slide Demo
The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range : Slide « Mootools « JavaScript DHTML

Related examples in the same category
