使用jQuery UI Slider自定义范围/变量集

使用jQuery UI Slider自定义范围/变量集，可以通过以下步骤实现：

引入jQuery和jQuery UI库

在HTML文件中引入jQuery和jQuery UI库，可以使用CDN链接或者下载到本地后引入。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <title>jQuery UI Slider 示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <!-- 在这里添加代码 -->
</body>
</html>

创建HTML结构

在HTML文件中创建一个div元素，用于显示jQuery UI Slider。

<div id="slider"></div>

初始化jQuery UI Slider

在JavaScript代码中，使用jQuery选择器选中div元素，并调用slider()方法初始化jQuery UI Slider。

$(document).ready(function() {
  $("#slider").slider({
    range: true,
    min: 0,
    max: 100,
    values: [25, 75],
    slide: function(event, ui) {
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
  });
});

显示当前选中的范围

在HTML文件中创建一个input元素，用于显示当前选中的范围。

<p>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

更新当前选中的范围

在JavaScript代码中，使用jQuery选择器选中input元素，并在slide事件中更新当前选中的范围。

$(document).ready(function() {
  $("#slider").slider({
    range: true,
    min: 0,
    max: 100,
    values: [25, 75],
    slide: function(event, ui) {
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
  });
  $("#amount").val("$" + $("#slider").slider("values", 0) + " - $" + $("#slider").slider("values", 1));
});

现在，你已经成功地使用jQuery UI Slider自定义了范围/变量集。你可以根据需要修改代码，以适应不同的场景。