HTML5 input type range for vertical orientation possible in Firefox?

HTML5Web DevelopmentFront End Technology

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.

raja
Updated on 13-Oct-2022 07:36:11

Advertisements