HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users. There are a number of options to choose from in terms of configuring your range inputs, such as defining the range values and steps. With a little JavaScript, you can capture and respond to user interaction with the range slider control.
In this tutorial we will create a basic HTML5 range input slider to resize an image, with a JavaScript function updating elements in the page as the user alters the range. At the moment, Internet Explorer and Firefox do not support the range input, but the WebKit (Safari and Chrome) and Opera browsers do.
Create an HTML5 Page
Let’s create an HTML5 page outline as follows:
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>
We have spaces ready for our body HTML, CSS and JavaScript code. First enter the slider range input in the body section of your page:
<div id="slider"> 5% <input id="slide" type="range" min="5" max="200" step="5" value="100" onchange="updateSlider(this.value)" /> 200% </div><br/>
Take a moment to look at the attributes within the slider element. We tell the browser to treat it as a slider input by including range as the type. The minimum and maximum values determine what the browser will interpret the slider being taken to either end of the range. The step attribute determines the gap between possible selectable values along the range. This means that our range values will be 5, 10, 15, 20 and so on, up to 200. The value attribute sets the initial value for the range, which we set at 100, so that our image will initially display at 100% of its normal size. Finally, we call a JavaScript function to update the page when the user alters the range input slider. To make the input usable, we include informative text at either side.
Provide Elements to Update
The purpose in using the range input is of course to allow the user to control some aspect of the page. First let’s include an indicator of the selected value, below the range input:
<div id="chosen">100</div>
We will update this when the user interacts with the slider. Now let’s add our image to scale:
<div id="picHolder"> <img id="pic" src="cateye.jpg" alt="cat eye"/> </div>
You should of course alter the image source to reflect your own image file – this is the file you can see in the demo. We will use the containing element to style the image and the image ID attribute to identify it in JavaScript. This is the image we are using:
Respond to User Interaction
Now for the JavaScript. Add the following function outline in the script section of your page head:
function updateSlider(slideAmount) { }
When the user changes the slide amount, the page passes the current value selected to this function. Inside the function we will use this information to update the page. First, update the display element to output the amount chosen:
//get the element var display = document.getElementById("chosen"); //show the amount display.innerHTML=slideAmount;
Now we can scale the image, by getting a reference to it in the page and setting the width and height style properties using the value passed to the function as a parameter:
//get the element var pic = document.getElementById("pic"); //set the dimensions pic.style.width=slideAmount+"%";...
