Creating a Slider Control With the HTML5

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 Sue Smith 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. Let’s create an HTML5 page outline. She has spaces ready for her body HTML, CSS and JavaScript code. First enter the slider range input in the body section of your page. Take a moment to look at the attributes within the slider element. She tells 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.

If you wish to have a full features cross browser slider you may check out our DMXzone Slider