Using a larger custom image for the drag handles

[KP IMG BPO]

I'm currently using a slider with two drag handles to set a date range on a web page which is intended to be used with a large touchscreen display.  The problem is that the default drag handles are a little too small to easily grab with a fingertip, so I'd like to use a custom set of larger ones.

I'm able to do custom skins just fine, right up until the point where I enlarge the drag handles, and then everything goes wrong.  My enlarged handle image experiences all kinds of strange behavior.  It will be truncated (I'll lose the right side of the image) when it first displays.  When I try hovering or dragging, it will suddenly grow to the full size, then sometimes shrink back when I let it go.  The left and right handles will display differently, then when I cross them they'll revert, and so forth.  Basically, it's all gone wacky on me.

The closest I've been able to get is with this entry in my custom css file:

.RadSlider_Custom .rslHorizontal a.rslDraghandle,
.RadSlider_Custom .rslHorizontal a.rslDraghandle:hover,
.RadSlider_Custom .rslHorizontal a.rslDraghandle:focus,
.RadSlider_Custom .rslHorizontal a.rslDraghandle:active
{
    background:url('Slider/customhandle.jpg');
    width:20px;
}

Am I close? :)

If you can attach a sample project with 2 custom drag handles that are simply 30x20 pixel black rectangles, that should get me to the finish line.

Thank you

[KP IMG BPO]

Nevermind.  Realized I just had to specify height and width in the css with "important!" after them.