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

　　下面的动画展现了通过两个代表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.tsimport { 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 {};