0

jQuery UI を使用して、2 つのハンドルを持つカスタム スライダーを作成しようとしています。問題は、右側のハンドルがコンテナの外に移動していることです。

私は問題を知っています。その理由は、leftCSS プロパティを使用してハンドルが配置され、ハンドルの幅が 1 ピクセルを超えるため、右のハンドルがコンテナーの外に移動するためです。

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 に答える