如何做YUI 3 Slider widget是100％寬度

Question

有沒有辦法將YUI 3 Slider widget設置爲100% width？
在documentatiotn,length屬性設置爲px。我嘗試了%，但沒有工作。

YUI().use('slider', function (Y) { 
    var interval; 
    var slider = new Y.Slider({ 
     min   : 0, 
     max   : 3000, 
     value  : 3000, 
     length : '100%' 
    }); 
}); 

我的網站是響應式的，我的目標是在所有媒體查詢斷點只使用1個滑塊。

Answer 1

如果更改slider長度，則UI將爲updated automatically。

這意味着你可以在創建時設定的長度和後來改變它，如果窗口大小：

length : Y.one('.slider-parent').getComputedStyle('width'); 

添加事件調整模塊：

YUI().use('slider', 'event-resize' … 

調整大小的邏輯：

Y.on('windowresize', function() { 
    slider.set('length', Y.one('.slider-parent').getComputedStyle('width')); 
});