JQuery 滑块的最小最大值设置不正确

Question

我创建了以下 fiddle，它演示了我对 JQuery 滑块的使用。

我的问题是滑块的最小值和最大值似乎没有正确设置，因此范围标记的位置不正确。

我目前正在尝试将最小值设置为日期数组中的第一个（最早）日期，将最大值设置为数组中的最后一个（最晚）日期。

我已经调试并且可以看到变量设置正确但是运行范围标记都在范围的左侧。

另外运行执行按钮两次导致它重新加载并再次错误地设置它们。我哪里做错了？

正在加载范围

function loadRange (dates) {

        dates = $.parseJSON(dates);

    'use strict';

        var convertedArray = [];

        for (var index = 0; index < dates.length; ++index) {
            var converted;
            if (index === 0) {
                converted = (new Date(dates[index]).getTime() - 86400000) / 1000;
            } else {
                converted = (new Date(dates[index]).getTime() + 86400000) / 1000;
            }
            convertedArray.push(converted);
        }

        var min = new Date(convertedArray[0] * 1000).toISOString().slice(0, 10);
        var max = new Date(convertedArray[convertedArray.length - 1] * 1000).toISOString().slice(0, 10);

        var minDate = min;
        var maxDate = max;

        $("#slider-container").slider({
            range: true,
            min: convertedArray[0],
            max: convertedArray[convertedArray.length - 1],
            step: 864,
            values: convertedArray,
            slide: function (event, ui) {
                var min = new Date(ui.values[0] * 1000).toISOString().slice(0, 10);
                var max = new Date(ui.values[ui.values.length - 1] * 1000).toISOString().slice(0, 10);
                $("#amount").val(min + " - " + max);
                minDate = min;
                maxDate = max;
            }
        });

        $("#amount").val(min +
            " - " + max);
    }

Answer 1

您没有为 values 选项提供正确的数据。来自 docs:

This option can be used to specify multiple handles. If the range option is set to true, the length of values should be 2.

目前您正在传递整个值数组（在您的 JSFiddle 中为 37）。更改为以下内容，它应该可以工作：

values: [convertedArray[0], convertedArray[convertedArray.length - 1]]

已更新 JSFiddle：https://jsfiddle.net/ku519g0f/

JQuery 滑块的最小最大值设置不正确

Min Max values not setting correctly with JQuery Slider

jquery

slider

date-range