A Brief Introduction

In our last tutorial, we saw how to use the HTML5 range attribute to select between a range of numbers using the Slider Bar element. We also saw how we can manipulate other elements based on the value of our slider by making the numeric value appear inside of a <div> element as HTML.

Today, we’ll expand on what we’ve learned and do something a bit more exciting. We’ll take a standard div element, and place two slider elements within it. One slider will control the border radius of the <div>, the other will the scale the width. We’ll be using JQuery as our JavaScript library of choice.

Step 1: The HTML

The HTML for our page is simple, and contains our div element and the two sliders, each with a unique ID. Here’s what the body of the HTML page looks like:

Step 2: The CSS

There also isn’t much to the CSS in this demonstration. We want to make our “demo” <div> more visible, so we’ve added a border , a background color, and a definition for the height and the width.

Here’s a look at the CSS file:

Step 3: JQuery

Now things get a bit more complex. We need to pass the values of our slider inputs to JavaScript, and allow it to manipulate some of the CSS properties for our “demo” <div>. We’ll be using two of CSS3′s special properties, border-radius and transform:scale.

We’ll need to create 2 JQuery methods to grab the values from the slider, and immediately pass them to the appropriate CSS properties of our <div>. Let’s take a look at how this is done:

We declare 3 variables to represent the 3 objects on our page. Next, we establish the functionality for our sliders. JQuery comes with a built-in change function. What this says is, in effect “Hey, JQuery, whenever a change is made to this element, do something!”

The “something” that the function actually does is what we write inside of the brackets. In our case, we’ve said that whenever our cornerSlider changes, take that value and pass it to the border-radius CSS declaration of the demo <div>. The reason you see 3 CSS declarations is because I’ve included the border-radius declaration for all of the major browsers. The scaleSlider.change( ) function is very similar, however, this function is only changing the width of our demo <div> in the CSS.

We now have our sliders wired up to manipulate the CSS properties of our <div>, and if you open the page up into your browser (assuming that you’ve linked the CSS and JQuery files to the page), you can move the sliders and see the <div> shape react to the values.

A Few Last Words

Sliders are very common user interface elements, and with the help of JavaScript, can be used variety of different purposes. The important thing to remember is that the value of the slider is just a number – and anything that takes a numeric value can be manipulated by them. Some common uses of the slider would be to allow a user to select a specific number of rooms in a hotel, or even something totally out of left field like the amount of pepperonis they’d like on their pizza. Either way, the Slider Bar element is certainly one that you’ll want to get familiar with, and will definitely add a new level of functionality to your website or application.

Download Source Files