jQWidgets jqxSlider rangeSlider 属性

jQWidgets 是一个基于 jQuery 的 UI 组件库，其中包含了 jqxSlider 这个滑动条组件，可以进行单个值或范围值的选择。下面是该组件中 rangeSlider 属性的详细攻略。

rangeSlider 属性

rangeSlider 属性用于控制 jqxSlider 组件是否支持范围选择，其默认值为 false（即只能选择单个值）。

使用方法

可以通过以下代码来设定 rangeSlider 属性为 true，开启范围选择模式：

<div id="sliderContainer"></div>

<script>
  $('#sliderContainer').jqxSlider({
    rangeSlider: true,
    // 其他属性...
  });
</script>

相关方法

如果开启了范围选择模式，那么就需要使用以下方法来获取选择的范围值：

• getRange()：获取当前选择的范围值，返回的是一个数组，包含两个元素：[min, max]。
• setRange(min, max)：设置当前的范围值，参数均为数字类型。

以下是对 getRange() 和 setRange(min, max) 方法的具体使用实例：

<div id="sliderContainer"></div>

<script>
  $('#sliderContainer').jqxSlider({
    rangeSlider: true,
    max: 100,
    step: 1,
    showTicks: true,
    showButtons: false,
    showRange: true,
    values: [40, 60] // 初始化时设置范围值
  });

  // 获取范围值
  var range = $('#sliderContainer').jqxSlider('getRange');
  console.log(range); // 控制台输出：[40, 60]

  // 设置新的范围值
  $('#sliderContainer').jqxSlider('setRange', 30, 70); // 修改范围值为 30~70
</script>

在上面的示例代码中，我们初始化时使用了 values 属性来设置了范围值，然后使用 getRange() 方法获取当前选择的范围值，输出到控制台。接着，使用 setRange(min, max) 方法修改范围值为 30~70。

相关事件

如果使用了范围选择模式，那么就会有两个额外的事件可以使用：

• change：当选择的范围值发生改变时触发，回调函数中包含 event 和 data 两个参数。
• rangeChanging：当正在调整选择范围时进行时触发，回调函数中包含 event 和 data 两个参数。

以下是对 change 和 rangeChanging 事件的具体使用实例：

<div id="sliderContainer"></div>

<script>
  $('#sliderContainer').jqxSlider({
    rangeSlider: true,
    max: 100,
    step: 1,
    showTicks: true,
    showButtons: false,
    showRange: true,
    values: [40, 60],
    change: function(event, data) {
      console.log('选择范围值发生改变', event, data);
    },
    rangeChanging: function(event, data) {
      console.log('正在调整选择范围', event, data);
    }
  });
</script>

在上面的示例代码中，我们使用 change 和 rangeChanging 事件来获取相关事件。当选择范围值发生改变时，change 事件被触发，并在控制台输出一条相关信息。当正在调整选择范围时，rangeChanging 事件被触发，并在控制台输出一条相关信息。

总之，使用 rangeSlider 属性可以开启 jqxSlider 的范围选择模式，并且可以使用 getRange()、setRange(min, max)、change、rangeChanging 等方法和事件，灵活地控制范围选择的功能。