jQuery UI滑塊句柄走出界限

我已經能夠完美地設計它，但讓它留在它的容器內一直是一個挑戰。保證金餘額修復似乎不適用於我。jQuery UI滑塊句柄走出界限

這裏有一個的jsfiddle：http://jsfiddle.net/Erugp/

2011-10-20 Talasan Nicholson

您應該使用JQUI類代替。但其相當棘手改變佈局，因爲Widget劑量考慮到CSS：（ –

http://jsfiddle.net/Erugp/29/同樣的事情。 –

http://jsfiddle.net/Erugp/31/以及它很難集中它，仍然把它放在容器裏面：/ –

的問題是，jQuery UI的滑塊使用具有相對值左側的CSS屬性動畫滑塊。這意味着它會將手柄的左邊緣從滑塊的左邊緣一直滑到另一邊的邊緣，從而溢出。一個解決方案是使滑塊div更小，並用另一個包含樣式的div包裹它。外部div width =滑塊寬度+句柄div。

經過一番小小的CSS大小和邊距的擺弄，它爲我工作。

來源

2011-12-18 11:28:36

我注意到的唯一的事情是，如果你點擊最右邊的滑塊，它不會自動滑過。這是因爲你點擊了包裝器，而不是在滑塊div上。但是這可能不是那麼大的影響，你仍然可以滑向那邊。 –

除了Mihai所說的之外，我還在填充格中添加了填充物，並將把手移至中心。 – user1786317

對此的解決方案是：您不需要包裝任何東西，只需將手柄的左側邊距設置爲1/2寬度的負值。正如描述的：http://bugs.jqueryui.com/ticket/3893

來源

2013-10-03 14:46:24

這絕對有效，並且非常簡單！這一切都很簡單。 –

修復它的使用javascript：

var $Slide = jQuery('#StatusSlide'); 
$Slide.slider({ 
    slide: function(event, ui) { 
    /* Fix handler to be inside of slider borders */ 
    var $Handle = $Slide.find('.ui-slider-handle'); 
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value')/$Slide.slider('option', 'max'))); 
    } 
}); 
/* Fix handler to be inside of slider borders */ 
var $Handle = $Slide.find('.ui-slider-handle'); 
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value')/$Slide.slider('option', 'max')));

，這裏是你的提琴固定：http://jsfiddle.net/he04hqg3/

來源

2014-10-19 14:09:24 brubla

這使得滑塊變得有點跳躍，並且它不會線性跟隨鼠標。 – kjprice

jQuery UI滑塊句柄走出界限

回答

相關問題