聊聊如何实现自定义滑块组件？-emx自定义滑块

下面的动画展现了通过两个代表x、y轴的滑块来实现图形的平移效果动画，本文介绍怎么来实现这样的滑块。

滑块html结构

示例通过ul列表结构组织，每个li元素的内容表示一个滑块，每个滑块包含名称、滑块和值三部分内容，其中滑块使用input元素即可实现，只需要将type设置为range即可。

<div id="toolbox"><ul><li><!--滑块名称--><div>x</div><!--滑块--><input class="xin-widget-slider" type="range" min="0" max="1740" value="870"><!--滑块表示的值--><div class="xin-widget-value">399</div></li><li><div>y</div><input class="xin-widget-slider" type="range" min="0" max="860" value="430"><div class="xin-widget-value">312</div></li></ul>
</div>

滑块CSS样式

整个滑块组通过绝对定位的方式将其定位在web页面的右上角，取消ul列表的默认列表样式，每个滑块的名称、滑块、值居中对齐，只需要简单几个css样式就可以达到这个效果。

/*将toolbox容器绝对定位到web页面右上角*/
#toolbox {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1rem 2rem;
    opacity: 0.6;
}
/*不显示ul任何列表样式*/
#toolbox ul {
    list-style-type: none;
}
/*居中对齐滑块名称、滑块、值*/
#toolbox ul li {
    display: flex;
    align-items: center;
}

TypeScript代码实现滑块组件封装

接下来，还需要通过js代码添加滑块监听处理方法，实时更新滑块的值，并提供回调入口供应用使用该滑块。这里通过TypeScript来实现，代码如下：

export class xinUI {

    // 创建滑块组件
    setupSlider(parent_selector: string, options: any) {
        var parent = document.querySelector(parent_selector);

        // 从options中提取滑块的名称、最小、最大值、当前值等，不存在的则取默认值
        var name = options.name;
        var min = options.min || 0;
        var max = options.max || 1;
        var callback = options.callback;
        var value = options.value || 0;
        // 创建一组滑块
        var elm_li = document.createElement("li");
        elm_li.innerHTML = `
            <div>${name}</div>
            <input class="xin-widget-slider" type="range" min="${min}" max="${max}" value="${value}">
            <div class="xin-widget-value">${value}</div>`;
        parent.appendChild(elm_li);
        var elm_slider = elm_li.querySelector(".xin-widget-slider");
        var elm_value = elm_li.querySelector(".xin-widget-value");
        // 更新显示滑块的值
        updateValue();
        // 添加input、change事件，实时改变滑块的值并回调options指定的方法
        elm_slider.addEventListener("input", handleChange);
        elm_slider.addEventListener("change", handleChange);

        function updateValue() {
            elm_value.textContent = value;
        }

        function handleChange(event) {
            value = event.target.value;
            updateValue();
            // 供用户回调
            callback(event, {value: value});
        }
    }
};

滑块组件示例

下面的示例在web页面的右上角创建两个滑块代表x、y坐标，滑动滑块将在控制台打印滑块的值。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./src/css/layout.css">
    <title>滑块组件使用示例</title>
</head>
<body>
    <div id="toolbox">
        <ul>
        </ul>
    </div><!-- slider-ui.js为上面滑块组件代码编译为js后的代码，这里不再列出 -->
    <script type="module" src="./build/slider-ui.js"></script>
    <script type="module" src="./build/main.js"></script>
</body>
</html>

main.ts

import { xinUI } from "./slider-ui.js";

function main() {
    
    var translation = [10, 30];
    // 创建x、y平移滑块
    var myUI = new xinUI();
    myUI.setupSlider("#toolbox ul", {name: "x", max: 100, value: translation[0], callback: updatePosition(0)});
    myUI.setupSlider("#toolbox ul", {name: "y", max: 100, value: translation[1], callback: updatePosition(1)});
    
    function updatePosition(index) {
        return function(event, ui) {
            translation[index] = parseInt(ui.value);
            //以下为应用处理的代码，这里仅打印其信息以示例console.log(translation[index]);
        }
    }
}
main();

export {};