Simple Slider with HTML5 Range Input Type

May 26th, 2012 by Laeeq | 1 comment

Unlike HTML, HTML5 intoduces a new range type of Input. The range type is used for input fields that have values from a range of numbers. So here in this post we will learn how to create smooth slider using HTML5 Range Input type.

view plaincopy to clipboardprint?
  1. <input type=“range”>

There are attributes like max, min, step and value by which we can set restrictions on what numbers are accepted.

So from here we will proceed to the real example of HTML5 Range Input by creating a simple Slider step by step.

Step 1: Create HTML5 Mark-up

First, we will create example markup using simple form element and input type

view plaincopy to clipboardprint?
  1. <form method=“post”>
  2. <h1> HTML5 Simple Slider using Range Input </h1>
  3. <input type=“range” name=“slider” min=“0″ max=“10″ step=“1″ value=“”>
  4. <output name=“sliderresult”>  </output>
  5. </form>

Step 2: Design and CSS

Here in this step we’ll handle design and style. in below css we have used :before and :after attribue to know what are specified min and max values.

view plaincopy to clipboardprint?
  1. body {
  2. font-family: ‘Verdana,Arial,Helvetica,sans-serif’;
  3. text-align: center;
  4. }
  5. input { font-size: 16px; font-weight: bold;  }
  7. input[type=range]:before { content: attr(min); padding-right: 10px; }
  8. input[type=range]:after { content: attr(max); padding-left: 10px;}
  10. output {
  11. display: block;
  12. font-size: 12px;
  13. font-weight: bold;
  14. }

In above css code we have create content before and after the range input, and make their values equal to the min and max values.

Step 3: JavaScript

Below is javascript example code that we we’ll use in our simple slider to make it more dynamic.

view plaincopy to clipboardprint?
  1. (function() {
  2. var f = document.forms[0],
  3. slider = f['slider'],
  4. sliderresult = f['sliderresult'],
  5. cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
  7. // range input.
  8. var o = document.createElement(‘input’);
  9. o.type = ‘range’;
  10. if ( o.type === ‘text’ ) alert(‘Sorry. Your browser is not supporting HTML5 new features. Try latest browser version.’);
  12. // Set initial values of the input
  13. slider.value = cachedRangeValue;
  14. sliderresult.value = cachedRangeValue;
  16. // update local storage when make slider selection.
  17. slider.addEventListener(“mouseup”, function() {
  18. localStorage ? (localStorage.rangeValue = slider.value) : alert(“Save data to database or anywhere else.”);
  19. }, false);
  21. // Display selected value when sliding.
  22. slider.addEventListener(“change”, function() {
  23. sliderresult.value = slider.value;
  24. }, false);
  26. })();

Till now all browsers are not support all HTML5 features but it’s fun to play with HTML5 new features and controls.

You can subscribe to PHPZAG.COM posts by Email

 

Related Topics:

 

 

  1. andreaswinfordxd
    September 27th, 2012 at 15:43 | #1
    Reply | Quote

    Thanks for sharing superb informations. Your website is very cool. I am impressed by the details that you have on this blog. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for more articles. You, my friend, ROCK! I found just the info I already searched everywhere and simply couldn’t come across. What a great site.
    http://uggslipper2.WebStarts.com

  1. No trackbacks yet.