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

Range范围选择

安装与调用

引入如下 CSS 和 JS：

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Range.css">
<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Range.js"></script>

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

<script type="module">
    import "../../theme/edge/js/common/ui/Range.js";
</script>

本组件为内置自定义元素组件，如果需要兼容 Safari 浏览器，还需要引入下面的 JS。

<script src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"></script>

如果是npm安装调用，则：

import 'lu2/theme/edge/css/common/ui/Range.css';
import 'lu2/theme/edge/js/common/safari-polyfill.js';
import 'lu2/theme/edge/js/common/ui/Range.js';

如果 JS import语法报错，试试在业务代码中动态引入。

import('lu2/theme/edge/js/common/safari-polyfill.js');
import('lu2/theme/edge/js/common/ui/Range.js');

基本使用示意

浏览器原生 Range 效果如下：

想要使用 LuLu UI 的 Range 范围选择效果，仅需给 type="range" 区域选择框添加 is="ui-range" 即可。

无需初始化演示

宽度：

HTML如下：

<input type="range" value="50" min="0" max="100" step="10" data-tips="${value}px" is="ui-range">

range 选择的最大值和最小值由原生的 min 和 max 属性控制，每次选择的范围由 step 属性控制。

三个属性都可以缺省，min 默认为 0，max 默认为 100，step默认是1。

data-tips 的值为移动滑杆按钮时候出现的黑色提示内容，${value} 是个动态数据，表示当前 <input> 元素实时 value 值。

事件处理演示

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

全球高武

透明度：

透明度：<input type="range" id="r0" value="100" min="0" max="100" data-tips="${value}%" is="ui-range">
// 直接给 <input> 元素绑定 input 事件即可
r0.addEventListener('input', function () {
    opacityImg.style.opacity = this.value / 100;
});

符合 LuLu UI 的设计理念，UI视觉与业务逻辑相分离。

负数跨度测试

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

HTML如下：

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

朝下显示测试

如果范围选择框位置很靠浏览器上边缘，希望黑色的提示朝下，加一个属性 reverse 就可以了，例如：

HTML如下：

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

区域范围选择

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

HTML如下：

<input type="range" data-tips="${value}℃" is="ui-range" multiple>
在区间范围选择下，可以通过 from 设置默认初始值（默认为 min），to 设置默认结束值（默认为 max），也可以通过 range 属性统一设置，格式形如 0,100


HTML如下：

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

range 优先级高于 from 和 to

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

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

动态改变选中的范围值

HTML 代码和 JS 代码如下：

<p><input type="range" id="rr" min="1" data-tips="${value}" is="ui-range"></p>
<button id="rb">改变值（随机）</button>
rb.addEventListener('click', function () {
    rr.value = Math.ceil(100 * Math.random());// 和原生相同，使用 .value 就可以了
    rmr.range = '20,80';// 区间选择可使用 .range（from/to） 进行赋值
});

disabled 禁用测试

处于禁用状态的时候，范围选择框无法滑动，无法点击，无法聚焦，且视觉半透明。

button.addEventListener('click', function () {
    range.disabled = !range.disabled;
});

宽度 100% 演示

使用 width="100%"，或者使用 CSS 设置，例如：

<input type="range" is="ui-range" width="100%">
<input type="range" is="ui-range" multiple width="100%">

增删监听测试

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

也可以直接通过 innerHTML 添加方式

button.addEventListener('click', function () {
    range.remove();
    this.disabled = true;
});

删除原生的 range 范围选择框即可。

扩展：评星实现

评星的本质是在一个范围内进行选择，因此使用range范围也可以实现，我们只需要添加一个 is="ui-rate" 即可实现

<input type="range" is="ui-rate" max="5" step="0.5" value="0">

评星默认是五个，如果你需要定义评星的数量就传入一个自定义属性和值 style="--number: 10"。 

input type="range" is="ui-rate" max="10" step="0.5" value="1.5" style="--number: 10;">

disabled 禁用测试

<input type="range" is="ui-rate" disabled max="5" step="0.5" value="0">

readonly 只读测试

<input type="range" is="ui-rate" readonly max="5" step="0.5" value="3" tabindex="-1">

温馨提示：

  1. max step value 三者要成倍数的关系（ 若有 --number，也要算在里面 ），否则可能会导致星星展示不全，比如max=100,--number:10, 那么 step 和 value 就要是 5 的倍数
  2. min 只能设置 0 或者不设置，若要设置初始值，请设置 value，它的值要和 max 成倍数关系

  3. 尺寸大小通过 font-size 属性控制，如下所示。

    字号大小：

本页贡献者：

xboxyan, sunseekers