jQWidgets jqxSlider values 属性介绍

jQWidgets jqxSlider 是一个基于jQuery的响应式滑块插件，可用于实现可选择的值域范围选择、数字输入和音量控制等功能。其中，values属性是jQWidgets jqxSlider插件中的一个重要属性，用于设置滑块的值。

values属性的基本语法

values: [number|boolean|null]

values属性的值可以是一个数字、布尔值或空。如果values设置为数字数组，则滑块将显示一个“范围”选择器，允许用户选择两个范围之间的值。如果values设置为一个数字，则滑块将显示一个“单一”选择器，允许用户选择一个值。如果values设置为true，则范围选择器将禁用。如果values设置为false，则单一选择器将禁用。

values属性的可用选项

值域 | 类型 | 默认值 | 描述 --- | --- | ---| --- number | 数组 | [0] | 设置滑块的值范围，单个值或值的数组 boolean | 布尔值 | false | 是否使除第一个范围选择器之外的所有范围选择器无效 null | | | 这个属性没有默认值，如果没有任何设置，滑块将根据其它属性的值自动生成一组值。

values属性的实例

下面的示例演示如何使用values属性来设置单一滑块的值：

$(document).ready(function () {
    $('#slider').jqxSlider({
        min: 0,
        max: 1000,
        tooltip: true,
        values: 250,
        step: 50
    });
});

在上述代码中，我们将values属性设置为250，因此滑块将按照该值初始化。

接下来，我们演示如何在滑块中设置一个值域范围，并使用values属性：

$(document).ready(function () {
    $('#slider').jqxSlider({
        min: 0,
        max: 1000,
        tooltip: true,
        values: [250, 750],
        rangeSlider: true,
        step: 50
    });
});

在上述代码中，我们将values属性设置为 [250,750]，因此滑块将显示一个值域范围选择器。

最后，我们演示如何使用values属性将除第一个范围选择器之外的所有范围选择器设置为无效：

$(document).ready(function () {
    $('#slider').jqxSlider({
        min: 0,
        max: 1000,
        tooltip: true,
        values: [250, 750],
        rangeSlider: true,
        valuesCollapsed: true,
        step: 50
    });
});

在上述代码中，我们将values属性设置为[250,750]，并将valuesCollapesed属性设置为true，这将会使第二个范围选择器无效。

总结

在本文中，我们了解了jQWidgets jqxSlider插件中values属性的用法和实例，可以通过本文提供的代码和示例来快速上手该属性的使用，为你的网站或应用程序添加现代化的响应式滑块组件。