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

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

成都创新互联专注于榆社企业网站建设,成都响应式网站建设公司,商城网站建设。榆社网站建设公司,为榆社等地区提供建站服务。全流程按需网站开发，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

滑块html结构

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

x
399
y
312

滑块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 = `
            
${name}

            
            
${value}
`;
        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

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 {};

分享题目：聊聊如何实现自定义滑块组件？
网站链接：http://www.zsjierui.cn/article/dpcscop.html