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

下面的动画展现了通过两个代表x、y轴的滑块来实现图形的平移效果动画，本文介绍怎么来实现这样的滑块。,,示例通过ul列表结构组织，每个li元素的内容表示一个滑块，每个滑块包含名称、滑块和值三部分内容，其中滑块使用input元素即可实现，只需要将type设置为range即可。,整个滑块组通过绝对定位的方式将其定位在web页面的右上角，取消ul列表的默认列表样式，每个滑块的名称、滑块、值居中对齐，只需要简单几个css样式就可以达到这个效果。,接下来，还需要通过js代码添加滑块监听处理方法，实时更新滑块的值，并提供回调入口供应用使用该滑块。这里通过TypeScript来实现，代码如下：,下面的示例在web页面的右上角创建两个滑块代表x、y坐标，滑动滑块将在控制台打印滑块的值。
index.html,main.ts