使用jQuery UI创建自定义滑块

我正尝试使用jQuery UI创建具有两个手柄的自定义滑块。问题是右手柄正在从容器中移出。使用jQuery UI创建自定义滑块

我知道这个问题，原因是手柄的位置使用了left CSS属性，并且由于手柄的宽度大于一个像素，所以右手柄移出容器。

我不想使用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); 
    } 
    }); 
});

在固定任何帮助，这将不胜感激。

来源

2009-10-07 Baishampayan Ghose

我认为你将不得不忍受一个简单的修复，除非你想重新开发整个事物有很多额外的（和不必要的）复杂性。即使是jQuery UI sliders重叠左边界和右边界。

解决此问题的最佳方法是应用一半为手柄宽度的负左边距作为demonstrated here。

来源

2011-11-23 03:52:48 claviska

使用jQuery UI创建自定义滑块

回答

相关问题