ui-slider的范圍問題

Question

我正在嘗試使用滑塊設置范圍。 我希望兩個光標的重疊度不相同。 換句話說，當最小值滑塊和最大值滑塊彼此相鄰時，如何使滑塊凍結並保持原狀。 有任何想法嗎？ 先感謝您。

Answer 1

昨天做自定義樣式的滑塊時，我正在尋找解決方案。

從我發現的結果中什么都沒有，然后我自己想出了一個簡單的方法：

1.使用左側和右側填充將滑塊放入容器div

<div class="slider-container">
  <div class="slider-main ..."></div>
</div>

2.設置樣式

-容器（左右邊緣填充到一半的滑塊-手柄寬度）滑塊

-句柄（左邊距減去寬度的一半）

這樣的事情（我從內存中寫）

<style>
  .slider-container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .slider-handle {
    width: 16px;
    margin-left: -8px;
  }
</style>

您還應該從slider-main中刪除樣式並將其從那里移到slider-container

Answer 2

當它們即將發生沖突時，從slide函數返回false似乎可行： http : //jsbin.com/eyoge3/3

來自jsbin的代碼：

slide: function(event, ui) {
    var oldMin = $("#slider").slider("values", 0);
    var oldMax = $("#slider").slider("values", 1);
    var newMin = ui.values[0];
    var newMax = ui.values[1];

    if( oldMin != newMin && newMin == oldMax )
      return false;
    else if( oldMax != newMax && newMax == oldMin )
      return false;
}

Answer 3

jQuery UI滑塊范圍擴展

我需要類似的東西，所以我編寫了現有jQuery UI滑塊插件/小部件的擴展。 這些是該擴展程序支持的其他選項：

• 最小和最大范圍大小-最小范圍大小正是您所追求的
• 限制上下限邊界值-設置下限邊界柄的最大值和上限邊界柄的最小值
• 自動范圍滑動-允許將（任何）手柄拖動到最大范圍大小的限制內，這反過來又拖動另一個手柄。

您可以在我的博客上獲取代碼 （ 該代碼已更新，因此我不會直接在此處發布）。