контроль выбора диапазона периодов в ASP.NET MVC3

Question

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

Мне нужен слайдер, который может выбирать дату от 14/09 до 24/05.Поэтому я хочу позволить пользователю выбирать этот период в одном кадре, а не создавать несколько периодов с 14/09 по 31 / декабря и с 01/01 по 24/05.

Как вы можете видеть, есть два ползунка, первый из которых «от», а второй «в», пользователь может перемещать каждый ползунок для настройки выбора периода.

Есть ли третий-партийное управление (предпочтительно на основе jquery), чтобы достичь аналогичного эффекта?

Answer 1

Вы можете использовать Jquery Slider с опцией диапазона false.чтобы вы могли свободно перемещать указатели от и до по линии диапазона и показывать период наложения, создавайте еще два ползунка и скрывайте и отображайте их динамически на основе выбора от и до.

 function sliderOperatingControl(controlId, rangeVal, minVal, maxVal, valuesVal, slideLogic) {
        $(controlId).slider({
            range: rangeVal,
            min: minVal,
            max: maxVal,
            values: valuesVal,
            slide: slideLogic
        });
    }
 $(function () {
 sliderOperatingControl("#sliderFrom", false, 1, 365, [1, 365], function (event, ui) {
             var strDate = returnDate(ui.values[0]) + " To " + returnDate(ui.values[1]);
             $("#periodFromToLabel").html("Range: " + strDate);
             $("#SliderDisplay").slider("values", 0, ui.values[0]);
             $("#SliderDisplay").slider("values", 1, ui.values[1]);
             if (ui.values[0] > ui.values[1]) {
                 $("#SliderDisplay").slider("values", 0, ui.values[0]);
                 $("#SliderDisplay").slider("values", 1, 365);
                 $("#SliderDisplay2").slider("values", 0, 0);
                 $("#SliderDisplay2").slider("values", 1, ui.values[1]);
                 $("#SliderDisplay2").show();
             }
             else {
                 $("#SliderDisplay").slider("values", 0, ui.values[0]);
                 $("#SliderDisplay").slider("values", 1, ui.values[1]);
                 $("#SliderDisplay2").hide();
             }

         });
});

Итак, SliderDisplay и SliderDisplay2может быть динамически скрыт или видим на основе выбора от и до диапазона.