I have a slider widget. It's made up of several divs, and looks like this:
The slider “thumb” – the part you can drag to adjust the value, is in its own div:
<div style="width: 16px; height: 16px; top: -4px; left: 20px" id="sliderThumb" class="thumb" onmousedown="dragStart(event);"></div>
I used a combination of CSSDesk and CSS3 Generator to build the CSS for the control.
The CSS for the thumb looks like this:
.sliderThumb
{
position: relative;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-image: -moz-linear-gradient(top, #4677AC, #223A54);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4677AC), to(#223A54));
background-image: -o-linear-gradient(top, #4677AC, #223A54);
background-image: linear-gradient(top, #4677AC, #223A54);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4677AC', endColorstr='#223A54');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4677AC', endColorstr='#223A54')";
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
The problem I ran into is that Internet Explorer wasn't catching the onmousedown. So I couldn't drag the slider thumb. Everything worked great in Firefox 8, Chrome 15 and Safari 5.
After an hour on The Google, I found a tip. Setting the background image to none for IE would allow the mouse event through. For IE, I added:
background-image:url(/none);
and everything worked as expected.
Please, if you have the choice, don't use Internet Explorer.
