一、兼容
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()示例
https://www.easybui.com/demos...