Create HTML5 Range Slider with jQuery

HTML5 introduces a new range type of Input 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.

Also, read:

As we have covered this tutorial with live demo to create HTML5 range slider with jQuery, so the file structure for the example is following.

index.php
script.js
style.css

Steps1: Create HTML5 Range Slider
First we will create HTML5 range slider HTML in index.php. We will also create HTML to display slider range and image.

<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);
}

Latest Tutorials

Popular Tags