`
zhangyaochun
  • 浏览: 2566177 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html5之input type=range

阅读更多

Input类型 --range

 

 

  • 用于应该包含一定范围内数字值的输入域
  • 显示为滚动条
  • 可以同时设置minmax来指定范围
 
<input type="range" min="1" max="10" />
 
 
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value number 规定默认值
   
  兼容性
  

 
  
 
   
 
扩展阅读:
 
  • 大小: 93.3 KB
分享到:
评论

相关推荐

    自定义(滑动条)input[type=&quot;range&quot;]两个样式

    自定义(滑动条)input[type="range"]样式; 完成以下的五个步骤: 去除系统默认的样式; 给滑动轨道(track)添加样式; 给滑块(thumb)添加样式; 根据滑块所在位置填充进度条; 实现多浏览器兼容。

    自定义(滑动条)input[type="range"]样式 下载

    对应博客:http://blog.csdn.net/u013347241/article/details/51560290

    使用CSS来扩展增强Input Range的示例

    Input Range 对象是 HTML5 新增的。Input Range 对象表示使用 type=range 属性的 HTML &lt;input&gt; 元素。 注意: Internet Explorer 9及更早IE版本不支持使用 type=range 属性的 HTML &lt;input&gt; 元素。. 访问...

    HTML5 input新增的几种类型(数字、日期、颜色选取、范围)

    网上之所以还没有大量的出现对这些新型的input类型的使用,是因为还有很多人在使用古老的IE6/IE8,只有当使用这些古老浏览器的人所占的比例可以忽略不计时,那就是HTML5主导天下之日,那天也是我们Web开发人员的新...

    layui时间控件选择时间范围的实现方法

    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的...input type=text name=start_time class=layui-input id=start_time placeholder=开始时间(修改时间)&gt; &lt;div class=layui-inline&gt; &lt;div

    html5中的input新属性range使用记录

    感慨归感慨,当前的工作要完成,记录一个html5中的input新属性,range。发现这个属性是在一个网站的调色器中,感觉确实比较形象化,好看,就记录下了:  复制代码代码如下:&lt;input type=”range” min=”0″ max=...

    html5实现滑块功能之type=range属性

    html5实现滑块功能之type="range"属性 1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range。 2.感觉挺有意思,就做了一个关于滑块的动画的例子,可以通过开始和结束按钮来控制滑块的滑动和...

    可弹奏的HTML5 SVG圆形钢琴特效.zip

    input type="range" name="fifth" min="0" max="1" value="0" step="0.01" /&gt;      &lt;div&gt;Third  &lt;input type="range" name="third" min="0" max="1" value="0" step="0.01" /&gt;      &lt;div&gt;...

    HTML5-图片倾斜轮播切换3D特效.zip

    代码片段: &lt;div class="preloader" src="images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg"&gt; &lt;div class="preloader" src...input type="range" min="35" max="395" value="35" id="range"/&gt; &lt;/div&gt;

    JavaScript实战(原生range和自定义特效)简单实例

    今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的;下面是完整代码和演示: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&...

    html5 slider源码

    根据html5的最新&lt;input type="range"&gt; 来实现拖拉条功能。并把拖拉条的数值显示到textbox中。并触发后台textchanged事件。 使用到ajax updatepannal 防止页面整体刷新。

    html入门到放弃笔记

    HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问...

    jquery-rsSliderLens:UI滑块控件,可放大当前值

    input type="range" /&gt; : 使用此插件,默认情况下,相同的标记呈现为: 或您想像力带给您的几乎任何风格: 查看。 也可以在src/demo/demo.html主要特征适用于任何标记。 尽管从语义上讲, &lt;input type="range...

    js使用小技巧

    &lt;input type=text onkeypress="return event.keyCode&gt;=48&&event.keyCode&lt;=57||(this.value.indexOf(".")&lt;0?event.keyCode==46:false)" onpaste="return !clipboardData.getData("text").match(/D/)" ondragenter=...

    前端项目-rangeslider.js.zip

    前端项目-rangeslider.js,html5&lt;input type=“range”&gt;slider元素的简单、小型和快速的javascript/jquery polyfill

    javascript简易画板开发

    本文实例为大家分享了制作javascript简易画板的方法,供大家参考,具体内容...input type=range name=ram id=ram min=1 max=20 step=1 value=10/&gt; &lt;label id=ramnum&gt;字体大小:10px &lt;ul id=colorpanel&gt; 黑色 红色 绿

    webkit-input-range-fill-lower:在IE-Pure JS上自定义样式化本机HTML输入范围控件,如::-ms-fill-lower属性

    WebKit输入范围填充下限Hack 自定义WebKit浏览器上的本机输入范围控件,如::-ms-fill-lower属性新版本3.x通知由于对该...input type="range" min="0" max="10" value="10" id="your-custom-id"&gt;// invalid: no I

    HTML5的表单(绝对特别强大的功能)使用示例

    1、邮箱的自动验证 只需要type=“email” 2、日期的验证(年月日):type="date" 3、时间的验证(格式:00:00):type="time" 4、数字的验证 (可以向上加 向下减)type="number" 5、月份(–年–月)type="month" 6、...

    Range-Slider-Set

    input type="range"&gt;滑块元素的简单,小型和快速JavaScript / jQuery polyfill。 使用AndréRuffert的Rangeslider.js 通过JSON提供值将滑块锁定到可用和最接近的值自动调整同级对应滑块以匹配json给定数据演示...

    canvas实现图片根据滑块放大缩小效果

    效果图: 图(1) 原始图 图(2) 缩小后 图(3) 放大后 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt;...style type=text/css&gt;...input type=range name

Global site tag (gtag.js) - Google Analytics