Question

我有一个带4个手柄的滑块。滑块用于选择日期开始时间，午餐开始时间，午餐结束时间和日期结束时间。

手柄A可以在15分钟内移动。（9：15,9：30等）
手柄B应从手柄A移动30分钟。（如果A设置为9:15，B应仅滑动到9：45,10：15等。
手柄C可以在15分钟内从手柄B移动手柄D应再次从手柄C移动30分钟。

滑块就像这样步骤：--- 15分钟----------- ------ 30分钟15分钟30分钟------------ -------
----------- | A | ------------------ | B | ---------- | C | - -------------- | d | ----------------
---------- 9:00 -------------- 12:00 ------ 13:30 ----------- -16：00

一些有效的滑块状态示例来澄清问题：
- | A | ----------- | B | ------------- | C | ---------------- --- | d |
9:15 12:15 -------- --------- 13:00 15:00 ----------------

- | A | ----------- | B | ------------- | C | ------------- ------ | d |
9:30 ------- 12:00 13:00 --------- ---------------- 16:30

有没有办法将步骤设置为[15,30,15,30]，就像我将值设置为[60,240,360,540]？

请帮忙！感谢。

Answer 1

您可以使用jQuery UI Slider的start事件来实现它。当您开始滑动时，识别句柄并更新jQuery UI Slider的步骤属性。

HTML：

<body>
    <div id="slider-range"></div>
</body>

脚本：

 $(function () {
     $("#slider-range").slider({
         min: 0,
         max: 1500,
         values: [75, 300, 700, 1000],
         start: function (event, ui) {
             var hIndex = $(ui.handle).index();
             if (hIndex == 0 || hIndex == 2) {
                 $("#slider-range").slider("option", "step", 15);
             }
             if (hIndex == 1 || hIndex == 3) {
                 $("#slider-range").slider("option", "step", 30);
             }
         },
         slide: function (event, ui) {
             if (ui.values[0] > ui.values[1] || ui.values[1] > ui.values[2] || ui.values[2] > ui.values[3]) {
                 return false;
             }
             console.log("Handle 1:" + ui.values[0] + " 2:" + ui.values[1]+ " 3:" + ui.values[2]+ " 4:" + ui.values[3]);
         }
     });
 });

请参阅Demo

具有多个句柄的jquery滑块中不同句柄的不同“步长”值

1 个答案: