兩個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的滑塊

回答

相關問題