LuLu UI pure版中文文档 » 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/pure/css/common/ui/Tips.css,/lulu/pure/css/common/ui/Range.css">

<script src="https://qidian.gtimg.com/c/=/lulu/pure/js/common/ui/Follow.js,/lulu/pure/js/common/ui/Tips.js,/lulu/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 选择的最大值和最小值由原生的 min 和 max 属性控制，每次选择的范围由 step 属性控制。

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

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

事件处理演示

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

透明度：

透明度：<input type="range" id="r0" class="ui-range-input" value="50" min="0" max="100" data-tips="${value}%">

// 直接给 <input> 元素绑定 change 事件即可
r0.addEventListener('change', function () {
    img.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 过着添加 reverse 属性就可以了，例如：

HTML如下：

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

动态改变选中的范围值

改变值（随机）

HTML 代码和 JS 代码如下：

<p><input type="range"class="ui-range-input" id="r1" min="1"></p>
<button id="b1">改变值（随机）</button>

b1.addEventListener('click', function () {
    // range DOM 元素上 data.range 就是范围选择实例对象
    调用该实例暴露的 value 方法改变 range <input> 的值和滑块位置
    r1.data.range.value(Math.ceil(100 * Math.random()));
});

disabled 禁用测试

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

切换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%">

保持原生的 UI

给滑块选择输入框设置属性 is-visible 可以让其保持默认的 UI 效果。

<input type="range" is-visible>

需要注意的是 IE9 浏览器原生不支持 range 框，因此，IE9 浏览器下会表现为普通的输入框。

动态加载和删除

<button id="bi" class="ui-button" data-type="primary">添加</button>
<button id="br" class="ui-button" data-type="danger">删除</button>

bi.addEventListener('click', function () {
    this.insertAdjacentHTML('afterend', '<p><input type="range"></p>');
});
br.addEventListener('click', function () {
    var prev = this.previousElementSibling;
    if (prev.matches('p')) {
        prev.remove();
    }
});

语法和参数

var myRange = new Range(element, options);

其中：

element

必需。Element 元素或者 String 选择器。指 HTML 原生的 range 选择框。

options

可选。Object纯对象。可选参数见下表：

本组件依赖 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 范围选择框即可。