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 can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]