This is a migrated thread and some comments may be shown as answers.

Using a larger custom image for the drag handles

1 Answer 22 Views
Slider
This is a migrated thread and some comments may be shown as answers.
KP IMG BPO
Top achievements
Rank 1
KP IMG BPO asked on 03 Aug 2010, 12:35 AM
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

1 Answer, 1 is accepted

Sort by
0
KP IMG BPO
Top achievements
Rank 1
answered on 04 Aug 2010, 10:20 PM
Nevermind.  Realized I just had to specify height and width in the css with "important!" after them.
Tags
Slider
Asked by
KP IMG BPO
Top achievements
Rank 1
Answers by
KP IMG BPO
Top achievements
Rank 1
Share this question
or