HTML5 Slider control and JavaScript

HTML5 Slider control and JavaScript

In this tutorial I will show you how to create and use slider control in HTML5. I recommend you try this code in Chrome browser because it is the only browser which supports almost all HTML5 controls.

This control can be very useful for the people who don’t want to type in numbers or navigate pages etc. There are many opportunities to show slider control instead of input Text box to get numbers from users.

<input type="range"   
min="0"
max="90"
value="12"
step="5"
onChange="sliderChanged(this.value);" >

Slider Control attributes Description

min is the minimum value of sliding control that slider can have.

max is the maximum value that slider control can have.

value Default selected value of slider control. In my case it is displaced at 12 unit.

step When slider will change it will step in by 5 in my case.

onChange It’s an event which occurs when user actually moves the slider. I’m calling sliderChanged JavaScript function onChange event. Also, I’m passing the changed value to JavaScript function.

HTML5 Slider Control Example

<!document html>
<Html>
<Head>
<Title> Html5 Slider Control. </Title>
<script>
  function sliderChanged(x)
  {
     document.getElementById('span1').innerHTML = x ;     
  }
</script>
</Head>

<Body>

<input type="range"    min="0" max="90" value="12" step="5" onChange="sliderChanged(this.value);" >

<br/>

Slider Changed Value is: <span id="span1" >12</span>
</Body>
</Html>

Online html editor online JavaScript editorAsp.net Create Html ControlsPostback from JavaScriptBasic HTML5 TagsHTML5 TutorialJavaScript For LoopGridview select emailASP.net HTML5 Generate Article TagJquery Gridview Dropdownlist Selected Change Enable Disable ControlsHTML5 Video Player TutorialHTML5 With DataBase

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.