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

Posted 2023-05-09

【中文标题】如何在 jQuery UI 中创建多范围时间滑块

【英文标题】：How to create multi range time slider in jQuery UI

【发布时间】：2014-07-31 02:23:45

【问题描述】：

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

起点 10:00 AM--Range---2:00 PM 4:00 PM---Range-----8:00 PM 9:00 PM---Range---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(); 
        
    );

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

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

【参考方案1】：

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

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

我试过了。编辑：但关键部分（链接到 Elessar）已经在答案中。我看不出缺少什么重要部分。

尝试添加一个关于如何使用 Elessar 的示例。

我认为这应该由 Elessar 的使用页面来完成。如果用法发生变化，此答案将无效。如果你愿意，我可以添加一个链接。

@DaniloValente 如果链接消失，库消失，并且使用示例在这里没有多大用处...