一、兼容
HTML5在Input扩展了type的类型,设置type="range" 即可轻松获得一个滑动条控件。
<input type="range" value="10" min="0" max="100" step="1"/>
滑动条对应属性
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。
这个效果在不同浏览器的样式支持不太一样,在安卓微信浏览器是这样的效果。
BUI通过样式自定义样式统一了这个效果。
<input class="bui-range" type="range" value="10" min="0" max="100" step="1"/>
然而自定义样式只能定义到轨道跟滑动圆圈,滑动区域无法自动填充上对应的颜色。
/* 定义轨道 */
.bui-range::-webkit-slider-runnable-track {
}
/* 定义滑动圈的大小 */
.bui-range::-webkit-slider-thumb {
}
二、演变
一个突发奇想结合 range, progress是一样的参数,可以结合store把两者结合,形成一个自带填充的滑动组件。
示例地址:https://www.easybui.com/demos...
核心代码 b-model="range.value"
<input type="range" class="bui-range" min="0" max="100" value="10" b-model="range.value">
<progress class="bui-progress" max="100" value="10" b-model="range.value"></progress>
loader.define(function (requires, exports, module, global) {
// 合并接收的参数
let props = Object.asign({value:1},module.props);
// 初始化数据行为存储
var bs = bui.store({
el:`#${module.id}`,
scope: "range",
data: {
value: props.value,
},
methods: {
},
mounted: function () {
}
})
return bs;
})
三、新组件
通过上面的方式,简单却只能满足基本需求,比如客户需要在下方显示刻度,需要在某个区间内选择新的区间,如年龄,身高,上面的控件就无法满足了。
基于新版1.7.4版本,全新制作了一个范围选择器组件。
特点
- 简单的起止范围选择;
- 范围内的选择;
- 纵向范围选择;
- 纵向逆向范围选择;
- 范围刻度;
- 浮标;
- 支持负数;
效果预览
下载
下载地址:https://www.easybui.com/compo...
使用
<component id="range" name="pages/components/range/index" value="[0,20]"></component>
取值
// 取值
var val = bui.history.getComponent("range").value()
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。