LuLu UI Edge版中文文档 » Range范围选择

安装与调用

引入如下 CSS 和 JS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Range/index.css">

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Range/index.js"></script>

本组件为 Web Components，引用时需添加 type="module"，也可采用如下方式进行引用

<script type="module">
    import "https://qidian.gtimg.com/lulu/hope/ui/Range/index.js";
</script>

基本使用示意

给 type="range" 区域选择框添加 is="ui-range" 。

<input type="range" is="ui-range">

步阶和范围

步阶使用 step 属性控制，范围使用原生的 min 和 max 属性控制，初始值使用 value 属性。

<input type="range" value="50" min="0" max="120" step="10" is="ui-range">

值提示

如果想要实时显示当前值，一种方法是借助 'input' 事件处理，可以借助 Toast 组件，另外一种方式就是使用 tips 属性。

支持字面量语法，例如：

<input type="range" is="ui-range" tips="${value}%">

仅支持 value 这一个字面变量，支持任意的表达式。

事件处理演示

和原生的 range 选择框一样的事件处理，推荐使用 'input' 事件。

透明度：

拖动范围选择框，图片的透明度会发生变化。

透明度：<input type="range" id="r0" value="100" tips="${value}%" is="ui-range">

// 直接给 <input> 元素绑定 input 事件即可
r0.addEventListener('input', function () {
    img.style.opacity = this.value / 100;
});

负数跨度测试

看看能不能准确从 -10 滑到 10 。

<input type="range" tips="${value}" value="5" min="-10" max="10" is="ui-range">

朝下显示

设置属性 reverse。

<input type="range" is="ui-range" tips="${value}" reverse>

区域范围选择

有时候可能需要的区域范围选择器，比如温度区间（从 20℃ 到 40℃），添加 multiple 属性即可实现。

<input type="range" tips="${value}℃" is="ui-range" multiple>

起止值设置

可以通过 from 设置默认初始值（默认为 min），to 设置默认结束值（默认为 max），也可以通过 range 属性统一设置，格式形如 0,100

<input type="range" tips="${value}℃" is="ui-range" multiple from="20" to="80">
<input type="range" tips="${value}℃" is="ui-range" multiple range="10,60">

range 优先级高于 from 和 to

赋值和取值

可以通过 JavaScript 实时设置和获取：

// 获取
range.from;
// 设置
range.from = 20;
range.to;
range.to = 80;
range.range;
// 注意以逗号 , 连接
range.range = '20,80';

样式设置

颜色设置

可以使用 color 属性快捷设置。

<input type="range" is="ui-range" color="darkred">

支持任意颜色值，包括自定义属性。

<input type="range" is="ui-range" color="var(--ui-green)">

包括渐变：

<input type="range" is="ui-range" color="var(--ui-green), orange">

尺寸设置

默认宽度 100%，高度 2rem，可以使用 width 和 height 属性进行尺寸设置。

<input type="range" is="ui-range" width="300" height="3rem">

按钮和轨道尺寸

支持使用 size 属性设置滑竿按钮和轨道的视觉尺寸，如果没有单位，则认为是 px。

<input type="range" is="ui-range" size="25">

组件内置了 small 和 large 两个关键字值，对于尺寸为 1rem 和 1.5rem。

<input type="range" is="ui-range" size="small">
<input type="range" is="ui-range" size="large">

轨道高度和按钮高度比例恒定为 1:5，若想修改轨道的尺寸，可以使用 CSS 变量 --ui-range-track-hegiht，示意：

<input type="range" is="ui-range" height="3rem" style="--ui-range-track-hegiht: .375rem;">

圆角设置

默认轨道有圆角，如果不希望有圆角，可以设置 radius="none"。

<input type="range" is="ui-range" radius="none">

disabled 禁用态

设置 disabled 属性开启禁用。

<input type="range" is="ui-range" disabled>

增删监听行为测试

支持 createElement 创建元素，或者使用 innerHTML 方式添加。

button.addEventListener('click', function () {
    // 注意，这里需要添加{ is: 'ui-range' }
    var range = document.createElement('input', { is: 'ui-range' });
    range.type = 'range';
    range.tips = '${value}';
    // 如果需要区间选择就要加上这句
    range.setAttribute('multiple', '');
    // 插入到后面
    this.parentElement.after(range);
});

演示下范围选择框的删除。

button.addEventListener('click', function () {
    range.remove();
});