Question

我正在使用JQuery UI时间滑块。我希望获得具有多个手柄的多个范围如下所示：

起点10:00 AM - 范围---下午2:00 PM 4:00 ---范围------晚上8:00 9:00 ---范围--- 11： 00 PM端点

我试过这个

$("#slider2").timeslider({

        sliderOptions: {
            ranges:  [false, true, false, true], 
            min: 300, 
            max: 3179, 
            values: [400, 800,1100,1600,2000,2500],
            step:5
        },

        errorMessage: '#max2',
        timeDisplay: '#time2',

        clickSubmit: function (e){
            var that = $(this).siblings('#slider2');

            $('#schedule2 tbody').append('<tr>' +
                '<td>' + that.attr('id') + '</td>' +
                '<td>' + that.timeslider('getTime', that.slider("values", 0)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 1)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 2)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 3)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 4)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 5)) + '</td>' + 
                '</tr>');
            e.preventDefault(); 
        }
    });

如果有人有一个很好的例子，请与我分享链接以获得这些输出，或者请帮我修改上面的代码。

谢谢 “祝你有个美好的一天”

Answer 1

我一直在寻找解决方案，但很难找到（好的）解决方案。 Elessar似乎是个不错的选择。这里给出了答案：jquery-slider-plugin-that-supports-multiple-ranged-handles。

它的用法可以在Elassar's GitHub page上找到。

如何在jQuery UI中创建多范围时间滑块

1 个答案: