用jQuery制作HTML5范围滑块

HTML5 introduces a new range Input type with number of options to create beautiful sliders. The range type is used for input fields that have values from a range of numbers. With the range input type, you can create sliders with range. In this tutorial you will learn how to create HTML5 range slider with jQuery. The tutorial explained in easy steps with live demo and link to download source code.

<div class="container">	
	<h2>Create HTML5 Range Slider with jQuery</h2>	
	<div class="row">
		<div class="col-sm-4">	
			<div id="slider_container">
				10% <input id="slider" type="range"  min="0" max="200" step="5" value="50" />200%				
			</div>
		</div>
	</div>
	<div id="range">50</div>
	<div id="image_container">
		<img id="image" src="cat_eye.jpg"/>
	</div>
</div>

Steps2: Set Image Size Value from slider with jQuery

As in this tutorial live demo, we will set image width and height according to HTML5 range slider, so we will make changes in to handle functionality to set image width and height according to range sliders value.

$( document ).ready(function() {
	$("#slider").change(function() {
	  var slide_amount = this.value;	  
	  $("#range").html(slide_amount);
	  $("#image").attr({'width':slide_amount+"%", 'height':slide_amount+"%"})
	});
});

Steps3: CSS for Range Slider and Image Display
We will create CSS in style.css for display HTML5 range slider and image to resize with slider.

#slider_container {
	margin-left:10px;
}
#range {
	border-radius:10px;
	width:45px;
	padding-top:10px; padding-bottom:10px;
	background-image: -webkit-linear-gradient(top, #cccccc, #3399ff);
	background-image: -o-linear-gradient(top, #cccccc, #3399ff);
	background-image: -moz-linear-gradient(top, #cccccc, #3399ff);
	text-align:center;
	color:#ffffff;
	font-weight:bold; font-size:large;
	margin-left:10px;
	margin-top:10px;
}
#image_container {
	width:250px;
	height:240px;
	margin:10px;
}
input[type='range'] {
	-webkit-appearance: none;
	padding-left:2px; padding-right:2px;
	-webkit-border-radius: 5px;
	background-image: -webkit-linear-gradient(top, #000000, #3399ff, #000000);
}