玩转BUI系列2--自定义区间范围选择器range 玩转BUI系列2--自定义区间范围

一、兼容 HTML5在Input扩展了type的类型，设置type="range" 即可轻松获得一个滑动条控件。

文章图片

滑动条对应属性

max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。
这个效果在不同浏览器的样式支持不太一样，在安卓微信浏览器是这样的效果。

文章图片

BUI通过样式自定义样式统一了这个效果。

文章图片

然而自定义样式只能定义到轨道跟滑动圆圈，滑动区域无法自动填充上对应的颜色。

/* 定义轨道 */ .bui-range::-webkit-slider-runnable-track { }/* 定义滑动圈的大小 */ .bui-range::-webkit-slider-thumb { }

二、演变一个突发奇想结合 range, progress是一样的参数，可以结合store把两者结合，形成一个自带填充的滑动组件。
示例地址：https://www.easybui.com/demos...

文章图片

核心代码 b-model="range.value"

【玩转BUI系列2--自定义区间范围选择器range】

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