• Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
  • Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
  • #News
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk

MyCodeTips mycodetips-newlogocopy1

  • Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
Programming

Create Sliders with the Range Input in HTML5

How to Create Sliders with the Range Input in HTML5

HTML5 introduces the new range type of input.<input type=”range”>

Most notably, it can receive min, max, step, and value attributes, among others. Though only Opera seems to support this type of input right now fully, it’ll be fantastic when we can actually use this!
For a quick demonstration, let’s build a gauge that will allow users to decide how awesome “Total Recall” is. We won’t build a real-world polling solution, but we’ll review how it could be done quite easily.

Step 1: Mark-up

First, we create our mark-up.

Total Recall Awesomness Gauge

 


<form method=”post”>
<h1> Total Recall Awesomness Gauge </h1>
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=””>
<output name=”result”> </output>
</form>
Unstyled range input
Notice that, in addition to setting min and max values, we can always specify what the step for each transition will be. If the step is set to 1, there will then be 10 values to choose. We also take advantage of the new output element that we learned about in the previous tip.

Recommended Reading:ADD OR REMOVE HTML CLASSES IN JQUERY

Step 2: CSS

Next, we’ll style it just a bit. We’ll also utilize :before and :after to inform the user what our specified min and max values are. Thanks so much to Remy and Bruce for teaching me this trick, via “Introducing HTML5.”
view plaincopy to clipboardprint?

body { 
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif; 
text-align: center; 
} 
input { font-size: 14px; font-weight: bold; } 

input[type=range]:before { content: attr(min); padding-right: 5px; } 
input[type=range]:after { content: attr(max); padding-left: 5px;} 

output { 
display: block; 
font-size: 5.5em; 
font-weight: bold; 
}

Recommended Reading:CREATING MODAL WINDOW OR HIGHSLIDE WINDOW USING HTML5
Above, we create content before and after the range input, and make their values equal to the min and max values, respectively.
Styled Range

Step 3: The JavaScript

Lastly, we:
Determine if the current browser knows what the range input is. If not, we alert the user that the demo won’t work.
Update the output element dynamically, as the user moves the slider.
Listen for when the user mouses off the slider, grab the value, and save it to local storage.
Then, the next time the user refreshes the page, the range and output will automatically be set to what they last selected.

(function() { 
var f = document.forms[0], 
range = f['range'], 
result = f['result'], 
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 

// Determine if browser is one of the cool kids that 
// recognizes the range input. 
var o = document.createElement('input'); 
o.type = 'range'; 
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.'); 

// Set initial values of the input and ouput elements to 
// either what's stored locally, or the number 5. 
range.value = cachedRangeValue; 
result.value = cachedRangeValue; 

// When the user makes a selection, update local storage. 
range.addEventListener("mouseup", function() { 
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser."); 
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead."); 
}, false); 

// Display chosen value when sliding. 
range.addEventListener("change", function() { 
result.value = range.value; 
}, false); 

})();
Liked it? Take a second to support Ranjan on Patreon!
become a patron button
  • Click to share on Reddit (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • More
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - 1358 Views
Tags | HTML5
AUTHOR
Ranjan

Namaste, My name is Ranjan, I am a graduate from NIT Rourkela. This website is basically about of what i learnt from my years of experience as a software engineer on software development specifically on mobile application development, design patterns/architectures, its changing scenarios, security, troubleshooting, tools, tips&tricks and many more.

You Might Also Like

html5 css3 kursus

Top 10 Features of HTML5

January 18, 2014
2html5

Audio Video Control in HTML5

January 18, 2014
2html5

Creating Modal Window or Highslide window using HTML5

January 17, 2014
Next Post
Previous Post

Support us

mycodetips
mycodetips

Follow us @ LinkedIn 2850+

Subscribe for updates

Join 8,213 other subscribers

Latest Posts

  • YT-Featured-solidprinciples
    SOLID Principles of Software Design
  • IOS 16 Features
    Latest features in IOS 16
  • r-language
    How can R language be used for data analysis?
  • wordpress-coding-blog
    Guide To WordPress Coding Standards
  • YT-Featured-Algorithm
    What is Algorithm?
  • Frameworks of IOS
    Frameworks of IOS – Part ( I )
  • NSFileManager or NSPathUtilities
    NSFileManager or NSPathUtilities in Objective-C
  • Passing data between view controllers in Objective-C
    Passing data between view controllers in Objective-C
  • structures-classes-enum
    Structures and Classes in swift !
  • control-system-swift
    Control Flow in Swift
whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

techlynk

Techlynk

techbyte

Do2Day

techbyte

Techbyte

  • #about
  • #myapps
  • #contact
  • #privacy
  • #Advertise
  • #myQuestions

Android Android Studio API APP Programming Apps blogging CSS DATABASE dsa Features HTML HTML5 installation Interview Questions IOS iPhone javascript Mac objective-c OS Programming quicktips SDK SEO SQL swift Tips & Tricks Tools UI Web Wordpress Xcode

  • SOLID Principles of Software Design
  • Latest features in IOS 16
  • How can R language be used for data analysis?
  • Guide To WordPress Coding Standards
  • What is Algorithm?

©mycodetips.com