jQuery Horizontal Slider

---

Image elements

slider-bg-1.png

slider-handle.gif

HTML elements

<div id='example' class='ui-slider-1' style="margin:10px;">
     <div class='ui-slider-handle'></div>	
</div>	

<div id="sliderValue" style="border: solid medium black; width: 30px; height: 30px; padding: 10px; margin: 10px"></div>
	

CSS file

<link rel="stylesheet" href="flora.slider.css" type="text/css" media="screen" title="Flora (Default)">

Here is the contents of "flora.slider.css"

/* This file skins sliders */

.ui-slider { width: 200px; height: 23px; position: relative; 
             background-repeat: no-repeat; background-position: center center; }
.ui-slider-handle { position: absolute; z-index: 1; height: 23px; 
             width: 12px; top: 0px; left: 0px; 
			 background-image: url(slider-handle.gif);  }
.ui-slider-handle-active { border: 1px dotted black;  }
.ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }
.ui-slider-range { position: absolute; background: #50A029; 
            opacity: 0.3; filter: alpha(opacity=30); 
			width: 100%; height: 100%; }

/* Default slider backgrounds */
.ui-slider, .ui-slider-1 { background-image: url(slider-bg-1.png); }
.ui-slider-2 { background-image: url(i/slider-bg-2.png); }

JavaScript code

<script type="text/javascript" src="jQuery-1.2.6.js"></script>
<script type="text/javascript" src="ui.base.js"></script>
<script type="text/javascript" src="ui.slider.js"></script>
  
<script>
 $(document).ready(function(){
    $("#example").slider(
		{
			min: 0,
			max: 100,
			change: function(e, ui)
			{
			// Get slider value as a string
			var currentNum = $("#example").slider("value") + "";
			// Split off decimal portion
			var a = currentNum.split(".");
								
			var i = document.getElementById("sliderValue");								
			i.innerHTML = a[0];
			}
		});
  });
</script>