HTML5 输入类型 range 可以在 Firefox 中用于垂直方向吗?
在温度计中，随着温度升高，其中的水银也会上升。降低温度时也是如此。同样，如果您想在网页上创建这种效果，可以使用 HTML5 中 input 元素的 range 类型来实现。这被称为垂直方向的 range。滑块输入最常见的用途是当我们知道上下限时。
例如，如果我们正在开发一个记录不同地点温度的网站。您可以将温度作为滑动输入范围。在 Chrome 和 Safari 等各种 Web 浏览器中都可以这样做。最近，Firefox 更新了其系统，使其能够执行相同的操作。这可以通过使用 HTML5 和 CSS 来实现。
让我们来了解一下 Firefox。
Firefox
Mozilla Firefox 或 Firefox 是由 Mozilla 基金会开发的一款开源软件。它使用 Gecko 引擎渲染网页。它适用于 Windows7、macOS 和 Linux，也适用于 Android 和 iOS。
HTML5 输入元素
输入元素允许用户输入内容。它由 <input> 标签表示。它是一个自闭合元素，即不需要闭合标签。它具有各种输入类型和属性。
输入类型
input 元素的 type 属性指定用户输入的类型。type 属性的值如下:-
text - 文本格式输入。这是默认值。
checkbox - 用于可选择多个选项的复选框。
radio - 用于只需选择一个选项的复选框。
color - 用于指定颜色控件。它使用户能够在网页上选择颜色。
date − 用于选择完整日期格式的日期，即 yyyy-mm-dd。
button − 显示一个按钮，点击该按钮即可执行指定的功能。例如。提交
datetime-local − 用于选择不带时区的日期和时间。
email − 用于输入邮箱地址。
file − 用于用户选择文件。
number − 用于输入数字
input元素的其他属性包括 name、id、required(指定输入字段为必填项)、min、max、placeholder、size、src(指定图片来源)等。
输入类型范围
range 是 <input> 元素的 type 属性的值。它允许用户指定一个数值，该数值不得小于给定值(最小值)，也不得大于另一个给定值(最大值)。
精确值并不重要。它通常用滑块表示，而不是任何文本或数字条目。默认范围是 0-100。但是，您可以使用以下属性指定自己的范围 -
min - 分配最小值
max - 分配最大值
value - 分配默认值
step - 仅分配适当范围内的值
语法
<input type = "range">
示例
<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>
现在让我们看看如何创建垂直方向的 Range。
垂直方向的 Range
借助以下介绍的几种方法，可以在 Firefox 浏览器中实现垂直方向的 HTML5 输入类型 Range。
方法 1:使用 transform
以下代码用于垂直方向的 HTML5 输入类型 Range -
<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> 标签 − 用于编写 CSS 代码。
Position − 这是元素的属性，用于指定其在网页上的位置。此属性的值包括:-
Relative − 元素相对于其正常位置定位。
Absolute − 元素相对于最近的已定位祖先元素定位，即显示绝对值。
Fixed − 即使用户滚动，此元素也不会偏离其位置。
Top − 元素的此属性指定元素与网页上边距之间的距离。
示例
div { Position : relative; Top: 40px; }
Left − 元素的属性指定元素与网页左边距之间的距离。
示例
div { Position : absolute; Left : 15px; }
Transform − transform 属性可对元素进行 2D 或 3D 变换。它允许用户执行旋转、缩放、移动、倾斜、继承等操作。
示例
div{ transform: rotate(45deg); }
# transform: rotate(270 deg) − 这用于将水平范围条旋转 270 度，使其垂直。
方法 2:使用 Orient 属性
Orient 属性可在 Firefox 中使用。
< input type = "range" min= "0" max="15" value= "2" orient = "vertical">
方法 3:使用 Appearance 属性
appearance 属性的值为 slider-vertical，表示滑块为垂直滑块。
<style> input[ type= "range"] { -webkit-appearance : slider- vertical; } </style> <body> <input type= "range" min="0" max= "15" value ="2" step= "1" > </body>
结论
之前，创建范围滑块需要一堆 JavaScript 代码，而且仍然无法正常工作。但现在 HTML5 引入了各种新属性和功能，使我们能够使用范围类型实现一些新功能。
