LuLu UI pure版中文文档 »

Fork Me

Range范围选择

作为插件单独使用

引入如下CSS和JS:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Tips.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Range.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Follow.js"></script>
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Tips.js"></script>
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Range.js"></script>

或者引入合并的资源:

<link rel="stylesheet" href="https://qidian.gtimg.com/c/=/lulu/theme/pure/css/common/ui/Tips.css,/lulu/theme/pure/css/common/ui/Range.css">
<script src="https://qidian.gtimg.com/c/=/lulu/theme/pure/js/common/ui/Follow.js,/lulu/theme/pure/js/common/ui/Tips.js,/lulu/theme/pure/js/common/ui/Range.js"></script>

基本使用示意

Range组件默认会对type="range"区域选择框进行UI美化,通常无需进行任何的初始化。

如果存在范围选择框无法初始化的情况,请使用new Range()方法构造,参见“语法和参数”。

无需初始化演示

宽度:

HTML如下:

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

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

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

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

事件处理演示

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

全球高武

透明度:

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

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

负数跨度测试

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

HTML如下:

<input type="range" class="ui-range-input" value="5" min="-10" max="10">

朝下显示测试

如果范围选择框位置很靠浏览器上边缘,希望黑色的提示朝下,则和Tips组件一样,加一个类名.reverse就可以了,例如:

HTML如下:

<input type="range" class="ui-range-input reverse">

动态改变选中的范围值

HTML代码和JS代码如下:

<p><input type="range"class="ui-range-input" id="randomRange" min="1"></p>
<button id="rangeButton">改变值(随机)</button>
var randomRange = document.querySelector('#randomRange');
rangeButton.addEventListener('click', function () {
    // range DOM元素上data.range就是范围选择实例对象
    调用该实例暴露的value方法改变range <input>的值和滑块位置
    randomRange.data.range.value(Math.ceil(100 * Math.random()));
});

disabled禁用测试

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

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

宽度100%演示

<div class="ui-range-input"><input type="range" data-tips="值:${value}"></div>

或者使用width="100%",例如:

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

语法和参数

var myRange = new Range(element, options);

其中:

element
必需。Element元素或者String选择器。指HTML5原生的range选择框。
options
可选。Object纯对象。可选参数见下表:
参数名称 支持类型 默认值 释义
reverse Boolean false 黑色tips是否朝下显示。默认朝上,设置为true则朝下显示。

element设置类名reverse有同样的效果。

tips Function function (value) {
  return value;
}
如果tips是Function,则其返回值会作为黑色tips的内容显示。其中,上下文this指的是滑杆按钮元素,支持一个参数value,为element的当前值。

如果tips属性值为null, 则表示不显示黑色tips提示。

element设置data-tips属性有类似效果,例如data-tips="null"表示不出现黑色提示。动态值使用${value}匹配,例如data-tips="${value}%"会出现类似50%这样的黑色提示。

本组件依赖Tips组件。

关于实例对象

myRange就是返回的实例对象,暴露了以下属性和方法:

{
    element:{
        // 容器
        container: null,
        // 轨道
        track: null,
        // 按钮
        thumb: null
    },
    number: {
        // 最小值
        min: 1,
        // 最大值
        max: 100,
        // 步阶
        step: 1
    }
    params: {
        // 是否朝下
        reverse: false,
        // 黑色提示内容
        tips: function (value) {
            return value;
        }
    },
    // 是否可用
    disabled: false,
    // 赋值
    value: function (value) {},
    // 滑杆按钮定位
    position: function () {}
}

增删监听测试

button.addEventListener('click', function () {
    var eleRange = document.createElement('input');
    eleRange.setAttribute('type', 'range');
    // for非原生IE9
    eleRange.className = 'ui-range-input';
    // 插入到后面
    eleBtnAdd.parentElement.after(eleRange);
});

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

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

本页贡献者:

zhangxinxu,5ibinbin