目录

滑块(Range)

功能说明

滑动设置进度或大小。

HTML5

  1. <input id="range0" min="0" max="100" type="range"/>

属性列表

属性名 属性值 说明
type range 控件类型,不可修改
max 设定滑块最大显示值
min 滑块的最小值
progress 设定滑块当前显示位置
step 滑动时滑块的进度值(步长)
bindfield 控件绑定字段
progress-image 滑块轴的背景图片
rate-image 滑块进度图片

事件列表

事件名 说明
onchange 内容改变时触发的事件

支持公共事件
参见公共事件说明

实例

1、获取或修改滑块当前显示位置

  1. $id("xxx").get("max");
  2. $id("xxx").set("max", "100")//设定滑块最大值
  3. $id("xxx").get("min");
  4. $id("xxx").set("min", "0")//滑块最小值
  5. $id("xxx").get("progress");
  6. $id("xxx").set("progress", "53")//滑块当前值0~53

2、onchange事件的使用

  1. <input id="range0" min="0" max="100" type="range" onchange="huakuaiChange()"/>
  1. function huakuaiChange() {
  2. var value = $id("range0").get("value");
  3. $id("progressbar0").set("progress", value);
  4. }
文档更新时间: 2018-01-12 16:34