Mootools slider with two knobs

This is some text

Mootools Slider with two knobs ( Minimum and Maximum Knobs)

Create a subdirectory "images" and populate it with these images.

bkg_slider

old_bkg_slider

slider_knob

slider_l

slider_r

slider_rptr

spacer

// Create a subdirectory "css"
<link rel="stylesheet" href="css/slider.css" />

<p>This is some text</p>
<div id="brooks" style="float: left; width: 20px; height: 20px; background-color: yellow"></div>
<div id="brooks2" style="float: left; width: 20px; height: 20px; background-color: cyan"></div>

<br clear="all">

<!-- Start Slider with two  knobs-->
<div class="slider_outer" >
  <h3>Mootools Slider with two knobs ( Minimum and Maximum Knobs)</h3>
  <div class="slide_container" >
    <div id="slider_minmax_min"  class="floatl fontblue"> </div>
    <div class="slider_gutter" id="minmax_slider" >
      <div id="slider_minmax_gutter_l" class="slider_gutter_item iconsprite_controls"></div>
      <div id="slider_minmax_gutter_m" class="slider_gutter_item gutter iconsprite_controls">

        

        <img id="slider_bkg_img" src="images/bkg_slider.gif"/>
    
        <div id="slider_minmax_minKnobA" class="knob"></div>
   
        <div id="slider_minmax_maxKnobA" class="knob"></div>
      </div>
      <div id="slider_minmax_gutter_r" class="slider_gutter_item iconsprite_controls"> </div>
    </div>
    <div id="slider_minmax_max" class="floatl fontblue"> </div>
    <div class="clearfix"></div>

  </div>
</div>
<!-- End Slider with two  knobs-->



<script type="text/javascript" src="mootools12_all_p.js"></script>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript" >

// ON LOAD 
window.addEvent('domready', function() {
	var mySlideA = new Slider($('slider_minmax_gutter_m'), $('slider_minmax_minKnobA'),$('slider_bkg_img'), {
		start: 0,
		end: 15,
		offset:8,
		snap:false,
		// Construct the following on one line
		onChange: function(pos){$('brooks').setHTML(pos.minpos);$('brooks2').setHTML(pos.maxpos);
$('slider_minmax_min').setHTML('min '+pos.minpos);
$('slider_minmax_max').setHTML('max '+pos.maxpos);}
	}, $('slider_minmax_maxKnobA')).setMin(2).setMax(5);
	

});


</script>