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

文档 Github➹

Range范围选择

安装与调用

引入如下 CSS 和 JS:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui/Range.css">
<script type="module" src="https://qidian.gtimg.com/lulu/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://qidian.gtimg.com/lulu/edge/js/common/safari-polyfill.js"></script>

基本使用示意

浏览器原生 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 选择的最大值和最小值由原生的 minmax 属性控制,每次选择的范围由 step 属性控制。

三个属性都可以缺省,min 默认为 0max 默认为 100step默认是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 实时设置和获取:

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

垂直范围选择

有时候可能需要垂直的范围选择器,添加 vertical 属性即可实现。

HTML如下:

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

默认尺寸是 20px*150px,可通过 CSS 修改。

Safari 浏览器部分支持,滑竿拖动依然是水平方向,Firefox 浏览器完全不支持垂直范围选择

动态改变选中的范围值

HTML 代码和 JS 代码如下:

<p><input type="range" id="randomRange" min="1" data-tips="${value}" is="ui-range"></p>
<button id="rangeButton">改变值(随机)</button>
var randomRange = document.querySelector('#randomRange');
rangeButton.addEventListener('click', function () {
    randomRange.value = Math.ceil(100 * Math.random());// 和原生相同,使用 .value就可以了
    randomMultipleRange.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 成倍数关系
本页贡献者:

xboxyan, sunseekers