Input类型 --range
- 用于应该包含一定范围内数字值的输入域
- 显示为滚动条
- 可以同时设置min和max来指定范围
<input type="range" min="1" max="10" />
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
兼容性：
扩展阅读：
zhangyaochun
- 浏览: 2614829 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout（布局研究） (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom：
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王：
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988：
能提供附件下载吗，找不到js库，google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd：
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk：
试了，没用，你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
- 大小: 93.3 KB
分享到：
发表评论
-
style新的属性 scoped
2013-12-14 17:33 2421本文收录一个style的新属性：scoped ... -
html5 form的novalidate属性
2013-12-13 21:31 958HTML5 form的 novalidate属 ... -
main元素
2013-08-03 11:52 1319main元素： 来自：HT ... -
link之dns-prefetch
2013-07-08 13:40 1441先看一段代码： <link re ... -
丢弃shiv的外链依赖吧
2013-05-20 20:08 1322很久之前，我们都是直接采用shiv来规避低版 ... -
html5之dialog标签
2013-04-17 15:14 2125前言： 本文部分内容来自w ... -
html5之meter标签
2013-04-17 15:14 1460前言： 本文部分内容来自w3sc ... -
html5之datalist标签
2013-04-17 15:14 1499前言： 本文部分内容来自w3sc ... -
html5之bdi标签
2013-04-17 15:15 1594前言： 本文内容部分来自w3sc ... -
fullScreen API
2013-04-11 11:42 1359本文只是贴出一下兼容列表： ... -
html5 button的form属性
2013-04-11 11:35 1317本文来自：http://www.w3schoo ... -
Data URI
2013-03-05 18:13 1545前言： 本文部分内容来自 《随网之舞 ... -
在线检测相关
2013-03-05 14:16 1318如何判断当前浏览器的在线或离线状态？ // ... -
离线存储 application cache
2013-03-05 10:57 1827离线与缓存： 网页缓存依赖网络的存 ... -
html5 右键菜单案例
2013-03-04 13:05 4377contextmenu属性 html ... -
html5 之menu标签
2013-03-04 12:10 2039HTML5 menu标签 定义菜 ... -
设置type="range"为vertical
2013-02-21 16:56 1412如何设置type=“range”为vertical ... -
ios5新特性部分整理
2013-02-21 16:56 1295本文整理一下ios5对HTML5的支持情况： ... -
IE10支持HTML5的输入类型
2013-02-20 11:47 1353IE10对部分输入控件进行了触控优化： ... -
pageshow与pagehide
2013-02-19 16:18 1836本文部分内容来自《Javascript高级程序设计》，个人 ...
相关推荐
在HTML5中，`<input type="range">`滑动条控件是一个非常实用的元素，用于用户输入介于特定范围内的数值。然而，浏览器默认的样式通常较为简单，缺乏吸引力。为了提升用户体验和界面美观度，我们可以自定义滑动条的...
自定义(滑动条)input[type="range"]样式； 完成以下的五个步骤： 去除系统默认的样式； 给滑动轨道(track)添加样式； 给滑块(thumb)添加样式； 根据滑块所在位置填充进度条； 实现多浏览器兼容。
`<input type="range">` 创建一个滑块输入控件，用户可以通过拖动滑块在指定范围内选择数值。它也支持max、min和step属性。例如： ```html <input type="range" name="volume" min="0" max="100" value="50" /> ``` ...
这三个属性用于限制number、date、range等类型Input元素的输入值范围。min规定最小值，max规定最大值，而step定义了合法的数字间隔。例如，`<input type="number" min="1" max="10" step="2">`创建了一个只能输入1...
Input Range 对象是 HTML5 新增的。Input Range 对象表示使用 type=range 属性的 HTML <input> 元素。 注意： Internet Explorer 9及更早IE版本不支持使用 type=range 属性的 HTML <input> 元素。. 访问...
- HTML5还引入了`<input type="number">`和`<input type="range">`元素，它们可以控制数值类型的输入范围。 - 属性说明: - `min`: 最小值 - `max`: 最大值 - `step`: 步进值 - `value`: 初始值 - 示例代码: `...
网上之所以还没有大量的出现对这些新型的input类型的使用，是因为还有很多人在使用古老的IE6/IE8，只有当使用这些古老浏览器的人所占的比例可以忽略不计时，那就是HTML5主导天下之日，那天也是我们Web开发人员的新...
### HTML 5之表单新功能解析 随着前端技术的不断发展与创新，HTML 5作为新一代的Web标准，为开发者提供了更多强大而便捷的功能。在众多改进中，表单功能的增强尤为突出，极大地提升了用户体验及开发效率。下面将...
HTML5的`input`标签是构建交互式表单的关键，提供了更多的类型、属性和事件，让开发者可以创建更加丰富和功能强大的用户界面。 一、`input`标签基础 `input`标签在HTML中用于创建各种形式的用户输入控件。基本语法...
感慨归感慨，当前的工作要完成,记录一个html5中的input新属性，range。发现这个属性是在一个网站的调色器中，感觉确实比较形象化，好看，就记录下了： 复制代码代码如下:<input type=”range” min=”0″ max=...
HTML5中的`type="range"`属性为`<input>`标签带来了滑块功能，极大地增强了网页交互体验。在本文中，我们将深入探讨这个属性以及如何利用它来创建具有动画效果的滑块。 首先，`type="range"`是HTML5新增的一个输入...
解决layui时间控件清空之后无法正常使用的问题，以及时间范围的...input type=text name=start_time class=layui-input id=start_time placeholder=开始时间(修改时间)> <div class=layui-inline> <div
在HTML5中，`<input>`元素的`type`属性得到了扩展，增加了更多的类型，比如`color`，这使得开发者可以更方便地在网页中集成颜色选择功能。 `type="color"` 是HTML5中新增的`input`类型，它用于创建一个颜色选择器，...
**示例链接:** [HTML5表单之range控件高级示例](#) ##### 3. `<input type="date">`及其他时间控件 `type="date"`允许用户直接选择日期，无需使用额外的JavaScript插件。使用方法如下： ```html 选择日期：<input...
- **`<input type="range">`**：滑块控件，用于数值范围的选择。 - **`<input type="color">`**：颜色选择器。 - **`<input type="email">`**：电子邮件地址输入框，会自动进行格式验证。 - **`<input type="url">`*...
input type="range" name="fifth" min="0" max="1" value="0" step="0.01" /> <div>Third <input type="range" name="third" min="0" max="1" value="0" step="0.01" /> <div>...
除了这些新属性，HTML5还引入了多种新的input类型，如email、url、number、range、date等，这些类型提供了更精确的数据输入和验证。例如，`<input type="email">`确保用户输入的是有效的电子邮件地址格式，`<input ...