Question

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

我知道问题，原因是句柄使用left CSS属性定位，并且因为句柄的宽度超过一个像素，所以右手柄移出容器。 / p>

我不想使用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); 
    } 
  }); 
});

任何帮助解决这个问题都将受到高度赞赏。

Answer 1

我认为你将不得不忍受一个简单的修复，除非你想用大量增加（和不必要的）复杂性来重新开发整个事物。即使jQuery UI sliders与左右边界重叠。

解决此问题的最佳方法是将一个负左边距应用为demonstrated here的手柄宽度的一半。

使用jQuery UI创建自定义滑块

1 个答案: