Создание собственного слайдера с использованием пользовательского интерфейса jQuery - PullRequest
Новая
       22

Создание собственного слайдера с использованием пользовательского интерфейса jQuery

0 голосов
/ 07 октября 2009

Я пытаюсь создать пользовательский слайдер с двумя ручками, используя пользовательский интерфейс jQuery. Проблема в том, что правая ручка выходит из контейнера.

Мне известна проблема, причина в том, что маркеры расположены с использованием свойства CSS left, а поскольку ширина маркеров превышает один пиксель, правый маркер выходит из контейнера.

Я не хочу использовать пользовательский интерфейс слайдера по умолчанию, предоставляемый jQuery, и именно поэтому я борюсь с этим.

Код загружен на 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); 
    } 
  }); 
});

Любая помощь в исправлении этого будет высоко оценена.

1 Ответ

1 голос
/ 23 ноября 2011

Я думаю, что вам придется жить с простым исправлением, если вы не хотите перестроить всю вещь с большой добавленной (и ненужной) сложностью. Даже ползунки jQuery UI перекрывают левую и правую границы.

Лучший способ решить эту проблему - применить отрицательное левое поле, равное половине ширины ручек, как показано здесь .

...