0

我正在尝试使用 jQuery UI 创建一个带有两个句柄的自定义滑块。问题是右手柄正在移出容器。

我知道这个问题，原因是句柄是使用leftCSS 属性定位的，并且由于句柄的宽度超过一个像素，所以右句柄会移出容器。

我不想使用 jQuery 提供的默认滑块 UI，这就是我与之抗争的原因。

代码上传到 JSBin - http://jsbin.com/egoca/edit，复制在这里以求繁荣：

$(document).ready(function(){ 
  var end = parseInt($('#slider_range_slide').attr('minvalue'), 10); 
  var start  = parseInt($('#slider_range_slide').attr('maxvalue'), 10); 

  $('#slider_bar').slider({ 
    min: 0, 
    max: 100, 
    range: true, 
    values: [0, 100], 
    animate: true, 
    slide: function(e, ui) { 
      var left = $('#slider_bar').slider('values', 0); 
      var right = $('#slider_bar').slider('values', 1); 
      $(".slide_dis_l").css("width", left+"%"); 
      $(".slide_dis_r").css("width", (100 - right)+"%"); 
      $("#slider_handle_left").css("left", left+"%"); 
      $("#slider_handle_right").css("right", (100 - right)+"%"); 
      var from = start + (left / 100) * (end - start); 
      var to = (right / 100) * (end - start); 
      $('#price_slider_display').text(from + " to " + to); 
    } 
  }); 
});

任何解决此问题的帮助将不胜感激。

4

1 回答 1

1

我认为你将不得不接受一个简单的修复，除非你想重新开发整个事情，增加很多（和不必要的）复杂性。甚至jQuery UI 滑块也会重叠左右边界。

解决这个问题的最好方法是应用一个负的左边距，它是手柄宽度的一半，如此处所示。

于 2011-11-23T03:52:48.790 回答