Create HTML5 Range Slider with jQuery

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.

Also, read:

• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• Bootstrap Contact Form with Captcha using Ajax and PHP
• Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP

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

You may also like:

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download