CSS 左右拖動調色功能可以讓用戶自由地對不同元素的顏色進行調整，提高用戶體驗。我們可以使用 HTML5 的拖放 API 和 jQuery UI 來實現這個功能。
首先，在 HTML 中創建兩個<div>元素，一個表示拖動條，一個表示要調整的元素。我們需要為拖動條添加樣式，讓其呈現出可拖動的外觀。同時，給要調整的元素添加一個默認的背景顏色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 左右拖動調色</title>
<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#color-picker {
width: 200px;
height: 10px;
background-color: #d3d3d3;
border-radius: 5px;
margin-bottom: 10px;
}
#target {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="color-picker"></div>
<div id="target"></div>
<script>
//代碼實現
</script>
</body>
</html>接下來，使用 jQuery UI 的.draggable()方法將拖動條設置為可拖動狀態，并為其添加事件處理函數。當拖動條被拖動時，獲取其當前位置，并根據位置計算出相應的顏色值。最后，將該顏色值賦給要調整的元素的背景顏色。
$(function() {
var colorPicker = $("#color-picker"),
target = $("#target");
colorPicker.draggable({
axis: "x",
containment: "parent",
drag: function(event, ui) {
var maxValue = colorPicker.parent().width() - colorPicker.width(),
value = ui.position.left / maxValue,
color = "rgb(" + Math.floor(value * 255) + "," + Math.floor((1 - value) * 255) + ",0)";
target.css("background-color", color);
}
});
});現在，打開網頁，你將看到一個可拖動的條形圖和一個默認顏色的方形元素。當你拖動條形圖時，方形元素的顏色會相應地發生變化。試著拖動一下看看吧！