Custom image in RADSLIDER used as SCROLL BAR

[BalaVikram]

When we apply CSS to rad slider control ,handle image is not showing fully for example  in mouse over it showing middle part of the image from our image. While dragging up and down it showing up and down region of the image so we can’t use full image.

Attached image  (scroll Behaviour.jpg) is the image behaviour at various stages, like when dragging top, dragging down and mouse over. We do not want three types of images. We need the same image during all times!!!!

Attached image (smallScroller.jpg) is the real scroll image that we are using currently and we want to use in RADSlider control for the scroll functionality.

We are using the RADSlider control and the CSS provided. Please help in finding the issue!!

Thanks.

[Tsvetie]

Hello BalaVikram,
In case I understand you correctly, you want the dragHandle of the slider control to look different, depending of the position of the dragHandle on the track. In order to achieve this, you have to handle the load and valueChange client events of the slider and change the CSS class that is applied to the dragHandle element. For example:

<telerik:RadSlider ID="RadSlider1" runat="server" MinimumValue="0" MaximumValue="100" SmallChange="1"
    Orientation="Vertical" OnClientValueChanged="OnClientValueChanged" OnClientLoad="OnClientValueChanged" CssClass="CustomSlider">
</telerik:RadSlider>

<script type="text/javascript">
    function OnClientValueChanged(sender,args)
    {
        var dragHandleElement = sender.get_dragHandles()[0];
        Sys.UI.DomElement.removeCssClass(dragHandleElement, "rslTopHandlePosition");
        Sys.UI.DomElement.removeCssClass(dragHandleElement, "rslMiddleHandlePosition");
        Sys.UI.DomElement.removeCssClass(dragHandleElement, "rslBottomHandlePosition");

        var newValue = sender.get_value();
        if(newValue <= 25)
        {
            Sys.UI.DomElement.addCssClass(dragHandleElement ,"rslTopHandlePosition");
        }
        else if(newValue < 75)
        {
            Sys.UI.DomElement.addCssClass(dragHandleElement ,"rslMiddleHandlePosition");
        }
        else
        {
            Sys.UI.DomElement.addCssClass(dragHandleElement ,"rslBottomHandlePosition");
        }
    }
</script>

I have attached a simple page that demonstrates the approach.


Greetings,
Tsvetie
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[BalaVikram]

Thanks.

The Solution did not work AS IS. I tweaked to make it work. Here is the modifed CSS.

.CustomSlider div.rslVertical a.rslDraghandle,
    .CustomSlider div.rslVertical a.rslDraghandle:hover,
    .CustomSlider div.rslVertical a.rslDraghandle:focus,
    .CustomSlider div.rslVertical a.rslDraghandle:active
    {
        background:url('../Images/smallScroller.png') no-repeat;
        width:16px;
        height:25px;
        margin-left:-3.4px;

    }
    .CustomSlider div.rslVertical .rslTrack
{
    background:url('../Images/scrollbar_Gallery1.jpg') repeat-y;

}

    .CustomSlider div.rslVertical a.rslTopHandlePosition,
    .CustomSlider div.rslVertical a.rslTopHandlePosition:hover,
    .CustomSlider div.rslVertical a.rslTopHandlePosition:focus,
    .CustomSlider div.rslVertical a.rslTopHandlePosition:active
    {

    }

    .CustomSlider div.rslVertical a.rslBottomHandlePosition,
    .CustomSlider div.rslVertical a.rslBottomHandlePosition:hover,
    .CustomSlider div.rslVertical a.rslBottomHandlePosition:focus,
    .CustomSlider div.rslVertical a.rslBottomHandlePosition:active
    {

    }

    .CustomSlider div.rslVertical a.rslMiddleHandlePosition,
    .CustomSlider div.rslVertical a.rslMiddleHandlePosition:hover,
    .CustomSlider div.rslVertical a.rslMiddleHandlePosition:focus,
    .CustomSlider div.rslVertical a.rslMiddleHandlePosition:active
    {

    }