使用 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：

此选项可用于指定多个句柄。如果范围选项设置为 true，值的长度应为 2。

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

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

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