Mega Code Archive
The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range
<![CDATA[
<!--
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&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>
]]>