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.

claviska · Accepted Answer · 2011-11-23 03:52:48Z

1

I think you're going to have to live with a simple fix unless you want to redevelop the entire thing with a lot of added (and unnecessary) complexity. Even the jQuery UI sliders overlap the left and right boundaries.

The best way to solve this is to apply a negative left-margin that's half the width of the handles as demonstrated here.

answered Nov 23, 2011 at 3:52

claviska

12.5k3 gold badges29 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a custom slider using jQuery UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related