How to do YUI 3 Slider widget to be 100% width

Question

Is there a way to set YUI 3 Slider widget to be 100% width ?
In the documentatiotn , length attribute is set in px . I tryed with % , but not work.

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

My site is responsive and my goal is to use only 1 slider in all media query break points.

Answer 1

If you change the slider length, the UI will be updated automatically .

This means you can set the length at creation time and later change it if the window is resized:

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

Add the event-resize module:

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

Resize logic:

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