Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML5 input type range for vertical orientation possible in Firefox?
In a thermometer, as the temperature increases, the mercury in it rises up too. Vice versa is the case for lowering the temperature. Similarly, if you want to create such effect on a webpage, it is done by the range type of input element in HTML5. This is known as range for vertical orientation. The most common use of the slider input is when we know the lower and higher margins.
For instance, if we are developing a website that records the temperature of different places. You can have the temperatures as a sliding input range. It was possible to do so in various web browsers like Chrome and Safari. Recently, Firefox has updated its system which makes it do the same. This can be done by using HTML5 and CSS.
Let’s know a little about Firefox.
Firefox
Mozilla Firefox or Firefox is an open source software developed by the Mozilla Foundation. It uses Gecko engine for rendering webpages. It is available on Windows7, macOS and Linux. It is also available for Android and IOS.
HTML5 input element
The input element allows users to give their input. It is represented by <input> tag. It is a self- closing element i.e., it does not need a closing tag. It has various input types and attributes.
Input types
The type attribute of input element specifies the type of input given by the user. The values for the type attribute are as follows −
text − input in text form. It is the default value.
checkbox − used for the ones in which more than one option can be chosen.
radio − used for the ones in which only one option needs to be selected.
color − it specifies the color control. It enables the user to choose a color on the web page.
date − it is used to select a date in full date format i.e., yyyy-mm-dd.
button − it showcases a button which is to be clicked for doing the specified function. Eg. Submit
datetime-local − it is used to select date and time with no time zone.
email − used to enter email id.
file − used to select a file by the user.
number − used to enter a number
Other attributes of input element are name, id, required (specifies that input field is required) , min, max, placeholder, size, src ( specifies the source of image ), etc.
input type range
range is a value of the type attribute of the <input> element. It enables the user to specify a numeric value which must not be less than a given value ( min value) , nor be more than the other given value ( max value).
The accurate value is not considered important. It is typically represented by a slider rather than any text or number entry. The default range is 0- 100. However you can specify your own range by using the following attributes −
min − assigns the minimum value
max − assigns the maximum value
value − assigns the default value
step − assigns only those value which are within the appropriate range
Syntax
<input type = “range”>
Example
<html> <style> h2, label { font: sans serif; } Input { margin : 0.5rem; } </style> <body> <h2> Temperature of Cities</h2> <div> <input type = “range” id= “Shimla” name= “Shimla” min = “13” max = ”24” > <label for= “Shimla” > Shimla </label> </div> <div> <input type = “range” id= “Chennai” name= “Chennai” min = “25” max = ”37” > <label for= “Chennai” > Chennai </label> </div> </body> </html>
Now let’s see how range with vertical orientation can be made.
Range with vertical orientation
The HTML5 input type range for vertical orientation is possible in the Firefox web browser with the help of a few methods explained below.
Method 1: Using transform
The following code is used for HTML5 input range type for vertical orientation −
<html> <style> input[ name = demo ]{ position: relative; top: 200px; left: 50px; height: 15px; width: 187px; border: 0 /* for using in Safari, Chrome and Opera */ -webkit-transform : rotate(270deg); /* for using in Firefox */ -moz-transform: rotate(270deg); /* for using in other browsers */ transform: rotate(270deg); } </style> <body> <input type= “range” name= “demo” min= “0” max= “9” step= “1” value = “2” > </body> </html>
<style> tag − It is used writing the codes of CSS.
Position − This is a property of an element which specifies its position on a web page. Values of this attribute are −
Relative − The element is positioned relative to its normal position.
Absolute − The element is positioned relative to the nearest positioned ancestor i.e. it shows the absolute value.
Fixed − This element does not move from its position even when the user scrolls.
Top − This property of an element specifies distance between the element and top margin of the webpage.
Example
div { Position : relative; Top: 40px; }
Left − The property of an element specifies distance between the element and the left margin of the webpage.
Example
div { Position : absolute; Left : 15px; }
Transform − The transform property makes 2D or 3D transformation to an element. It enables the users to rotate, scale, move, skew , inherit etc.
Example
div{ transform: rotate(45deg); }
# transform: rotate(270 deg) − This is used to rotate the horizontal range bar with an angle of 270deg to make it vertical.
Method 2: Using Orient Attribute
Orient property can be used in Firefox.
< input type = “range” min= “0” max=”15” value= “2” orient = “vertical”>
Method 3: Using the Appearance Property
The appearance property has a value of slider-vertical which makes vertical sliders.
<style> input[ type= “range”] { -webkit-appearance : slider- vertical; } </style> <body> <input type= “range” min=”0” max= “15” value =”2” step= “1” > </body>
Conclusion
Earlier, creating a range slider required stack of javascript codes and still did not worked. But now HTML5 has introduced various new attributes and features which enables us to do something new with the range type.
781 Views
