关于前端:玩转BUI系列2自定义区间范围选择器range

一、兼容

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 版本，全新制作了一个范畴选择器组件。

特点

1. 简略的起止范畴抉择；
2. 范畴内的抉择；
3. 纵向范畴抉择；
4. 纵向逆向范畴抉择；
5. 范畴刻度；
6. 浮标；
7. 反对正数;

成果预览

下载

下载地址：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…