Я создал следующую скрипку, демонстрирующую использование ползунка 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);
    }
2
Ebikeneser 16 Окт 2019 в 16:07

1 ответ

Лучший ответ

Вы не предоставляете правильные данные для параметра values. Из документов:

Этот параметр можно использовать для указания нескольких дескрипторов. Если для параметра диапазона задано значение true, длина значений должна быть 2 .

В настоящее время вы передаете весь массив значений (37 в вашем JSFiddle). Измените на следующее, и он должен работать:

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

Обновленный JSFiddle: https://jsfiddle.net/ku519g0f/

2
user7290573 16 Окт 2019 в 14:42