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

Fork Me

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="opacityRange" value="100" min="0" max="100" data-tips="${value}%" is="ui-range">
// 直接给<input>元素绑定input事件即可
opacityRange.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>

区域范围选择new

有时候可能需要的区域范围选择器,比如温度区间(从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浏览器部分支持,滑竿拖动依然是水平方向。

动态改变选中的范围值

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 eleRange = document.createElement('input', { is: 'ui-range' });
    eleRange.setAttribute('type', 'range');
    // 如果需要区间选择就要加上这句
    eleRange.setAttribute('multiple', '');
    // 插入到后面
    eleBtnAdd.parentElement.after(eleRange);
});

也可以直接通过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