Creating a Slider Control with the HTML5 Range Input

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.

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:

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:

These properties reflect the initial dimensions of the image file, so you will need to alter them for your own images. Finally, we can add some level of styling to the range input, but only in WebKit browsers:

We are only using the WebKit prefixes as other browsers do not yet support styling of the range input element itself. This is how the final result appears in Chrome:

Conclusion

That’s the slider complete. Test your page in a WebKit (or Opera) browser to see the effect. Although the range styling does not appear in Opera, the image scaling should. In Firefox the range input does not appear with a slider, but you can apply the scaling by simply entering the percentage value you want in the text-field that appears instead. As always, it’s a little early to rely on these features but they will afford developers a vastly improved set of interaction tools in future.

Sue Smith works as a Web/ software developer and technical writer based in the UK: see benormal.info for details. Sue has written for various clients including Smashing Magazine and Mobiletuts+. She also does a little Android development and some comedy writing.
More articles by Sue Smith

How I can load multiple images like a slider when I drag the range slider from left to right? plz help its urgent

Desperate learner

Saved my day, thanks!

Rich

My site has multiple sliders and when I add the code for more than one, all of the sliders update the value box on the first slider’s value box. I have not figured out how to fix this, yet.
Any suggestions?
Thanks,
Rich

Brent Hoskisson

In Chrome (37.0.2062.120) the event is not fired until the mouse is released. Is there a way to make it fire as the slider is dragged?
Thanks.

John Rose

Thank you, Sue Smith. I’m trying to figure out how to change images with captions using the range slider. While this doesn’t do that, it is interesting in itself and does deal with an image, though the changes are all to that single image.

anon

what is these defnitions
Content editable-
On blur and on focus-
Graphic formats for HTML-
–
An input field must be filled in-
A slider control-
A scalar measurement within a range-
Navigation links?-
element-
A header –

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.