A Brief Introduction

HTML5 is making a solid attempt at providing an easier life for people who build web applications. The “Slider Bar” is a very common user interface control in desktop applications, and has made its way onto the web in a big way in the last few years. It used to be that we’d have to whip up a few lines of JavaScript before we could use one of these sliders in our application, but HTML5 has given us an even more simple solution. We now have the range input type, which provides the end user with a bar to select a value within a specific range. Here’s what a Slider Bar typically looks like when rendered in a browser:

Let’s take a quick look at the attributes for our input:

1. type – The type of input we’ll be using. In our example, it will be a range input.
2. id – The id of our input, which will help us to target it via JavaScript
3. min – The smallest possible value of our slider bar.
4. max – The maximum value of our slider bar.
5. step – The interval of the values as a percentage. For instance, if we set it to 5 it would go 5,10,15,20, etc. In this case, since it’s set at one, it will count one by one up to 100.
6. value – The default value that we’d like our slider set to.

Writing Some Code

Today, we’ll be using JavaScript and an empty <div> element to display the value of the Slider Bar. You can really do some amazing things with this control, but to demonstrate the basics, we’re just going to have it display some numbers. In part 2, we’ll be using the slider bar to manipulate an element.

So, let’s get started. If you’ve haven’t already added the element to your HTML page, go ahead and do so now. Also, add a <div> element below it with an id of result. You’re HTML5 page should now look like this:

Our JavaScript here is fairly simple, and only requires a single function that will take the value of our slider bar, and pass it into the inner HTML of the “result” <div>. Add this bit of JavaScript into the head section of your HTML document:

As you can see, our showValue function takes a number for an argument, and then passes that number into our “result” <div> as HTML. Our last step is to make it so that every time our slider changes in value, it passes the value to the showValue function. To do this, we’ll add an onChange event handler. Change the range input in the HTML code so that it looks like this:

Final Thoughts

If you open the HTML file in your browser and use the slider, you’ll see the value of the slider appear in the <div> we created below. This value that you see appearing is being called by JavaScript, and we can later turn that value into whatever we’d like to help us manipulate an element on the page.

For instance, we could say that the value is the width of an element on a page, and make something wider by using the slider, or taller, by using the value as a height attribute. We’ll make heavy use of this element in our next tutorial, so be sure you grasp what’s going on here before moving on.

Download Source Files