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

Question

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

Я знаю проблему, причина в том, что ручки расположены с использованием свойства 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); 
    } 
    }); 
}); 

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

Answer 1

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

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