两个jQuery UI的滑块

我已经实现了一个jQuery UI的范围滑块有两个处理器两个jQuery UI的滑块

我的JS代码：

$(function() { 
       $("#slider-range").slider({ 
        range: true, 
        min: 16, 
        max: 99, 
        values: [ 30, 60], 
        slide: function(event, ui) { 
         if (ui.handle.nextSibling) {       
          setTimeout(calculatePos,5); 
          function calculatePos(){ 
           $("#start").html(ui.values[ 0 ]).position({ 
            my: 'center', 
            at: 'top-15', 
            of: $('.ui-slider-handle:first')          
           }); 
          }       
         } 
         else { 
          setTimeout(calculatePos,5); 
          function calculatePos(){        
           $("#end").html(ui.values[ 1 ]).position({ 
            my: 'center', 
            at: 'top-15', 
            of: $('.ui-slider-handle:last')          
           });             
          } 
         }  
        } 
       }); 
       });

现在，我想嵌入到一个新的滑块只有一个可以在16到99之间导航的手柄。也就是说，我会有三颗子弹。是否有可能实现这一点，并在一个方案中有两个功能？如果是，如何？

来源

2016-11-23 Unknown developer

范围句柄是固定的吗？滑块可以做1或2个手柄，但不能3.这就是说，你可能会在第一个滑块上浮动第二个滑块，也就是范围的宽度。 – Twisty

初次尝试：https://jsfiddle.net/Twisty/uw132d6m/将为范围滑块移动时添加一些调整。 – Twisty

我认为这可能会帮助你做你想做的事情。我没有HTML或CSS，所以我只是使用jQuery UI Demo作为基础。

工作实例：https://jsfiddle.net/Twisty/uw132d6m/3/

HTML

<div class="wrapper"> 
    <div id="start"> 
    </div> 
    <div id="end"> 
    </div> 
    <div id="slider-range-1" class="low"> 
    </div> 
    <div id="slider-range-2" class="high"></div> 
</div>

CSS

.wrapper { 
    position: relative; 
} 

#start, 
#end { 
    position: absolute; 
    font-size: 0.65em; 
} 

.low { 
    position: absolute; 
    top: 20px; 
    width: 100%; 
} 

div#slider-range-2.high { 
    position: absolute; 
    top: 20px; 
    border: 0; 
    background: transparent; 
} 

.high .ui-slider-handle { 
    width: 10px; 
}

的JavaScript

$(function() { 
    function calcWidth() { 
    var $h1 = $("#slider-range-1 .ui-slider-handle:eq(0)"), 
     $h2 = $("#slider-range-1 .ui-slider-handle:eq(1)"); 
    var w = $h2.position().left - $h1.position().left; 
    return w - 36; 
    } 

    function moveLeft($selector) { 
    $selector.position({ 
     my: "left top", 
     at: "right+11 top+5", 
     of: "#slider-range-1 .ui-slider-handle:eq(0)" 
    }); 
    } 

    $("#slider-range-1").slider({ 
    range: true, 
    min: 16, 
    max: 99, 
    values: [30, 60], 
    slide: function(event, ui) { 
     if (ui.handle.nextSibling) { 
     setTimeout(calculatePos, 5); 

     function calculatePos() { 
      $("#start").html(ui.values[0]).position({ 
      my: 'center', 
      at: 'top-15', 
      of: ".low .ui-slider-handle:eq(0)" 
      }); 
      moveLeft($("#slider-range-2")); 
      $("#slider-range-2").slider("option", "min", ui.values[0]); 
      $("#slider-range-2").width(calcWidth()) 
      .slider("option", "max", ui.values[1]); 
     } 
     } else { 
     setTimeout(calculatePos, 5); 

     function calculatePos() { 
      $("#end").html(ui.values[1]).position({ 
      my: 'center', 
      at: 'top-15', 
      of: ".low .ui-slider-handle:eq(1)" 
      }); 
      $("#slider-range-2").width(calcWidth()) 
      .slider("option", "max", ui.values[1]); 
     } 
     } 
    } 
    }); 
    $("#slider-range-2").slider({ 
    min: $("#slider-range-1").slider("values", 0), 
    max: $("#slider-range-1").slider("values", 1), 
    create: function(e, ui) { 
     moveLeft($(this)); 
     $(this).width(calcWidth()); 
    } 
    }); 
});

第二个滑块位置适合两个范围句柄。如果范围手柄已移动，则会调整第二个滑块以适合您的需要。您可以根据需要以相同的方式调整min，max或step选项。

我怀疑你需要在自己的代码中调整手柄尺寸等的偏移量。

来源

2016-12-16 18:34:57 Twisty

修复了一些标签：https：//jsfiddle.net/Twisty/uw132d6m/6/ – Twisty

两个jQuery UI的滑块

回答

相关问题