Timeline jQuery UI Slider

Show and hide several elements with Slider based on a range number.

by Pedro Gelli Pereira Tinoco Alves

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Theming jQuery UI Slider</title>
		<link rel="stylesheet" type="text/css" href="styles/style.css">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
	</head>
	<body>
	<section>	
		<span class="tooltip"></span> <!-- Tooltip -->
		<div id="slider"></div> <!-- the Slider -->
		<!-- <span class="volume"></span> --> <!-- Volume --><br />
		<span id="test"><p>1</p></span>
		<span id="test2"><p>2</p></span>
		<span id="test3"><p>3</p></span>
		<span id="test4"><p>4</p></span>
		<span id="test5"><p>5</p></span>
		<span id="test6"><p>6</p></span>
		<span id="test7"><p>7</p></span>		
	</section>
	</body>
</html>

CSS

p {
font-size: 3em;
}

body {
	background: url('../images/bg.jpg') repeat top left;
}
section {
	width: 75%;
	height: auto;
	margin: 5% 0 0 10%;
	position: relative;
}
#slider{
	border-width: 1px;
	border-style: solid;
	border-color: #333 #333 #777 #333;
	border-radius: 25px;
	width: 100%;
	position: absolute;
	height: 13px;
	background-color: #8e8d8d;
	background: url('../images/bg-track.png') repeat top left;
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 
    				  0 1px 0 0px rgba(250, 250, 250, .5);
    left: 20px;
}
.tooltip {
	position: absolute;
	display: block;
	top: -25px;
	width: 35px;
	height: 20px;
	color: #fff;
	text-align: center;
	font: 10pt Tahoma, Arial, sans-serif ;
	border-radius: 3px;
	border: 1px solid #333;
    -webkit-box-shadow:  1px 1px 2px 0px rgba(0, 0, 0, .3);
    box-shadow:  1px 1px 2px 0px rgba(0, 0, 0, .3);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: -moz-linear-gradient(top,  rgba(69,72,77,0.5) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.5)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8045484d', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
}
.volume {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	right: -5px;
	background: url('../images/volume.png') no-repeat 0 -50px;
	position: absolute;
	margin-top: -5px;
}
.ui-slider-handle {
	position: absolute;
	z-index: 2;
	width:...

JavaScript

$(function() {

			//Store frequently elements in variables
			var slider  = $('#slider'),
				tooltip = $('.tooltip'),
				test  = $('#test'),
				test2  = $('#test2'),
				test3  = $('#test3'),
				test4  = $('#test4'),
				test5  = $('#test5'),
				test6  = $('#test6'),
				test7  = $('#test7');
			

			//Hide the Tooltip at first
			tooltip.hide();
			test.show();
			test2.hide();
			test3.hide();
			test4.hide();
			test5.hide();
			test6.hide();
			test7.hide();

			//Call the Slider
			slider.slider({
				//Config
				range: "min",
				min: 0,
				max: 108,
				value: 0,

				start: function(event,ui) {
				    tooltip.fadeIn('fast');
				},

				//Slider Event
				slide: function(event, ui) { //When the slider is sliding

					var value  = slider.slider('value');

					tooltip.css('left', value).text(ui.value);  //Adjust the tooltip accordingly
					
					// Show test when slider value is between 0 and 2.
					if(value <= 2) { 
						test.show();
					} 
					if (value > 2 ) {
						test.hide();
					} 
					
					// Show test2 when slider value is between 20 and 30.
					if(value > 20) { 
						test2.show();
					}
					if(value < 20) { 
						test2.hide();
					} 
					if(value > 30) { 
						test2.hide();
					} 
					
					// Show test2 when slider value is between 20 and 30.
					if(value > 35) { 
						test3.show();
					}
					if(value < 35) { 
						test3.hide();
					} 
					if(value > 45) { 
						test3.hide();
					} 
					
					// Show test2 when slider value is between 20 and 30.
					if(value > 60) { 
						test4.show();
					}
					if(value < 60) { 
						test4.hide();
					} 
					if(value > 70) { 
						test4.hide();
					} 
				},

				stop: function(event,ui) {
				    tooltip.fadeOut('fast');
				},
			});

		});