整個滑塊組通過絕對定位的方式將其定位在web頁面的右上角，取消ul列表的默認列表樣式，每個滑塊的名稱、滑塊、值居中對齊，只需要簡單幾個css樣式就可以達到這個效果。
下面的動畫展現(xiàn)了通過兩個代表x、y軸的滑塊來實現(xiàn)圖形的平移效果動畫，本文介紹怎么來實現(xiàn)這樣的滑塊。
滑塊html結(jié)構(gòu)
示例通過ul列表結(jié)構(gòu)組織，每個li元素的內(nèi)容表示一個滑塊，每個滑塊包含名稱、滑塊和值三部分內(nèi)容，其中滑塊使用input元素即可實現(xiàn)，只需要將type設(shè)置為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代碼實現(xiàn)滑塊組件封裝
接下來，還需要通過js代碼添加滑塊監(jiān)聽處理方法，實時更新滑塊的值，并提供回調(diào)入口供應(yīng)用使用該滑塊。這里通過TypeScript來實現(xiàn)，代碼如下：
export class xinUI {
// 創(chuàng)建滑塊組件
setupSlider(parent_selector: string, options: any) {
var parent = document.querySelector(parent_selector);
// 從options中提取滑塊的名稱、最小、最大值、當(dāng)前值等，不存在的則取默認值
var name = options.name;
var min = options.min || 0;
var max = options.max || 1;
var callback = options.callback;
var value = options.value || 0;
// 創(chuàng)建一組滑塊
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事件，實時改變滑塊的值并回調(diào)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();
// 供用戶回調(diào)
callback(event, {value: value});
}
}
};滑塊組件示例
下面的示例在web頁面的右上角創(chuàng)建兩個滑塊代表x、y坐標(biāo)，滑動滑塊將在控制臺打印滑塊的值。
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];
// 創(chuàng)建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);
//以下為應(yīng)用處理的代碼，這里僅打印其信息以示例console.log(translation[index]);
}
}
}
main();
export {};
