Creating a custom slider using jQuery UI

Question

I am trying to create a custom slider with two handles using jQuery UI. The problem is that the right handle is moving out of the container.

I know the problem, the reason being the fact that the handles are positioned using the left CSS property and since the width of the handles is more than one pixel, the right handle moves out of the container.

I don't want to use the default slider UI provided by jQuery and that's why I am fighting with this.

The code is uploaded on JSBin - http://jsbin.com/egoca/edit, copied here for prosperity:

$(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); 
    } 
  }); 
});

Any help in fixing this will be highly appreciated.