CODEWITHSUNDEEP
javascriptyuiyui3
Petroff
Petroff

Reputation: 828

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.

Upvotes: 2

Views: 209

Answers (1)

Jonas G. Drange
Jonas G. Drange

Reputation: 8845

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

Upvotes: 3

Related Questions