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

最新推荐文章于 2024-08-09 08:03:49 发布

owilson

最新推荐文章于 2024-08-09 08:03:49 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

分类专栏： Webapp 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/owilson/article/details/127228845

Webapp 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用HTML5的range输入类型创建自定义样式的滑动条，并演示了结合progress元素实现带有填充效果的滑动组件。此外，还介绍了新版1.7.4中新增的范围选择器组件，该组件支持多种选择模式，如简单的起止范围选择、范围内的选择等。

一、兼容

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...