Slider without initial selection

[François]

Hi,
I would like to have a slider without selection, Just the ticks, but no default value.
Is it possible?

Thank you in advance,

Sincerely.

[Slav]

Hello François,

You can hide the drag handle of RadSlider by setting its property ShowDragHandle to false. Note that the selected region from the control's track should also be removed. To achieve this, please add the following CSS code in the head section of your page:

<style type="text/css">
    .RadSlider .rslSelectedregion
    {
        display: none;
    }
</style>

In order to display the RadSlider selection, when its value changes, you can handle its client-side event OnClientValueChanged as show in the example below:

<script type="text/javascript">

    function OnClientValueChanged(sender, args) { // OnClientValueChanged event handler


        $telerik.$(sender.get_element()).find(".rslSelectedregion").css("display", "block"); // displays the selected region

        sender.set_showDragHandle(true); // displays the drag handle

    }

</script>

Regards,
Slav
the Telerik team

[Emmanuel]

Thank you!

[Bromcom Development Team]

Hi,
I have used a the code below to change the selected region area on "onclientvaluechanged" event
$telerik.$(slider.get_element()).find(".rslSelectedRegion").css("background", "Red");

however, the background color does not change.

any suggestions?

[Princy]

Hi Osman Ismail,

Try overriding the default CSS as follows.

CSS:

<style type="text/css">
.RadSlider_Default .rslHorizontal .rslSelectedregion
{
    background:none !important;
    background-color:Red !important;
}
</style>

Thanks,
Princy.

[Bromcom Development Team]

Hi Princy,
I have already done that and it is working on initial load of the page.
 
However the default css background value is Blue, and on the ClientSide "onclientvaluechanged" event, I want to change the background color again to red, etc..

I couldnt find how too succeed that behaviour?

thanks.

[Slav]

Hello Osman,

Please use the following code sample to set different colors to the selected region of the track when the RadSlider is loaded and when its value is changed:

<script type="text/javascript">
    function OnClientLoad(sender, args) {
        $telerik.$(sender.get_element()).find(".rslHorizontal .rslSelectedregion").css({ "background": "none", "background-color": "Blue" });
    }

    function OnClientValueChanged(sender, args) {
        $telerik.$(sender.get_element()).find(".rslHorizontal .rslSelectedregion").css({ "background": "none", "background-color": "Red" });
    }
</script>
<telerik:RadSlider runat="server" ID="RadSlider1" OnClientLoad="OnClientLoad" OnClientValueChanged="OnClientValueChanged"
     Width="500px" Value="40"></telerik:RadSlider>

Greetings,
Slav
the Telerik team

[Bromcom Development Team]

Hi, which version of Telerik components does this work ? as I have tried exactly the same code but it didnt work. I am using 2010.1.415.35

[Princy]

Hi,

I tried the same in the version 2013.1.130.35 and worked as expected. Please try upgrading to the latest version as explained here.

Thanks,
Princy

[Paul]

This hides the selection but it is still selected behind the scenes.

 If you go to click on the first option which looks like its not selected (but is behind the scenes) the client side event wont fire.

Do you have a work around for this?

[Nikolay]

Hi,

It is expected OnClientValueChanged event to be not fired because the Slider value is not changed.

You can handle the OnClientValueChanging event which will be fired.

<script type="text/javascript">
    function OnClientValueChanging(sender, args) {
        alert(args.get_oldValue() + " " + args.get_newValue());
        // Cancel the changing of the selected value
        //args.set_cancel(true);
    }
</script>

Regards,
Nikolay
Telerik