jQWidgets jqxSlider rangeSlider 属性介绍

什么是 jQWidgets jqxSlider rangeSlider？

jQWidgets jqxSlider rangeSlider 是一个用于创建滑动条的 JavaScript 组件库。 rangeSlider 支持双滑块模式，可以实现一个区间范围内的滑动选择，并可以自定义风格和样式。

rangeSlider 的属性

以下是关于 jQWidgets jqxSlider rangeSlider 的属性列表：

{bool} animate（默认值：true）

当用户拖动滑块时是否启用动画过渡效果。

{bool} disabled（默认值：false）

是否禁用此范围滑块。

{String} layout（默认值："normal"）

范围滑块的布局模式。可选值包括：

• "normal"：正常布局，滑块之间没有间隔。
• "tick"：滑块之间存在间隔。

{number} max（默认值：100）

范围滑块的最大值。

{number} min（默认值：0）

范围滑块的最小值。

{Object} range（默认值：{min:0, max:100}）

范围滑块的初始范围值。

{bool} showButtons（默认值：true）

是否显示增加和减少滑块值的按钮。

{bool} showTickLabels（默认值：false）

是否显示刻度标签。

{bool} showTickMarks（默认值：false）

是否显示滑块刻度标记。

{bool} tooltip（默认值：false）

悬停在滑块上时是否显示提示信息。

{String} tooltipFormatFunction（默认值：null）

自定义提示信息的格式化函数。

{String} values（默认值：[0, 100]）

滑块的初始值范围。

rangeSlider 的事件

以下是 jQWidgets jqxSlider rangeSlider 的一些常用事件：

change

当用户移动滑块时触发。

create

当 rangeSlider 被创建时触发。

slideStart

当用户开始拖动滑块时触发。

slideEnd

当用户松开滑块时触发。

示范代码

$("#rangeSlider").jqxRangeSlider({
    theme: "energyblue",
    min: 0,
    max: 1000,
    showRange: true,
    showButtons: true,
    step: 50,
    layout: "tick",
    ticksFrequency: 10,
    range: { min: 200, max: 800 },
    tooltip: true,
    tooltipFormatFunction: function (value) {
        return value + " Units";
    }
});

结论

jQWidgets jqxSlider rangeSlider 提供了很多可定制的选项和事件，可以满足用户各种需求，是一个非常实用的工具。