Tip of the Day - YUI Slider Control

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

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

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

other relevant pages

about wwm

workingwith.me.uk is a resource for web developers created by Neil Crosby, a web developer who lives and works in London, England. More about the site.

Neil Crosby now blogs at The Code Train and also runs NeilCrosby.com, The Ten Word Review and Everything is Rubbish.