Tip of the Day - YUI Slider Control

Posted by Neil Crosby on February 6, 2007 08:30 PM

Here’s my tip of the day - if you’re using the YUI Slider control, don’t forget to set the width and height of the DIV that contains your slider thumb to the size of the IMG that actually displays your slider thumb.

<style type='text/css'>
    .slider {
    }

    .slider .thumb {
        width: XXXpx;
        height: YYYpx
    }
</style>

<div class='slider'>
    <div class='thumb'>
        <img src='/path/to/thumb.png' width='XXX' height='YYY' alt='Slider Thumb'>
    </div>
</div>

The reason that you need to explicitly set the width on the thumb DIV is that one of the functionalities of the YUI Slider control is that by clicking on the slider DIV you move the thumb to that point on the Slider. Not setting the width and height of the thumb DIV explicitly seems to cause the thumb to block clicks to the Slider, thus causing the thumb not to move as you click around the slider itself.

This tripped me up this afternoon, so I’m noting it down here for anyone else who ends up having similar issues in the future.

permalink | View blog reactions