时间戳

首页 > 解决方案 > 使用 JQuery 滑块未正确设置最小值最大值

jquery - 使用 JQuery 滑块未正确设置最小值最大值

问题描述

我创建了以下小提琴，演示了我对 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);
    }

标签： jquerysliderdate-range

解决方案

You're not providing the correct data for the values option. From the 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.

Currently you're passing the entire array of values (37 in your JSFiddle). Change to the following and it should work:

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

Updated JSFiddle: https://jsfiddle.net/ku519g0f/

推荐阅读