Search code examples
javascriptyuiyui3

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

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.

Solution

  • 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'));
});