Material Design Lite组件之滑块

1.介绍

Material Design Lite(MDL)滑块组件是新HTML5 <input type =“range”>元素的增强版。 一个滑块由一个水平线组成,在该水平线上放置一个小的可移动光盘(拇指),并且通常包含明确传达用户移动时设置的值的文本。

滑动条在用户界面中是一项相当新颖的功能,并允许用户通过在指定范围内移动拇指来选择一个值(向左移动较小的值,向右移动较高的值)。 他们的设计和使用是整体用户体验的重要因素。

2.配置选项

类名效果其他
mdl-slider定义容器作为MDL滑块组件必需类
mdl-js-slider为滑块添加默认行为效果必需类

注意:1)滑块可以使用disabled禁用

<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled>

2)尽管value属性用于设置滑块的初始值,但不应使用它来以编程方式修改该值; 而是使用MDL change()方法。 例如,假设slider1是滑块对象,newvalue是包含所需值的变量,请不要使用slider1.value = newvalue; 而是使用slider1.MaterialSlider.change(newvalue)。

3.应用举例
<!-- Default Slider -->
<input class="mdl-slider mdl-js-slider" type="range"
  min="0" max="100" value="0" tabindex="0">
<!-- Slider with Starting Value -->
<input class="mdl-slider mdl-js-slider" type="range"
  min="0" max="100" value="25" tabindex="0">

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值