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

Slider without initial selection

10 Answers 135 Views
Slider
This is a migrated thread and some comments may be shown as answers.
François
Top achievements
Rank 1
François asked on 29 Feb 2012, 11:47 AM
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.

10 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 02 Mar 2012, 12:26 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Emmanuel
Top achievements
Rank 1
answered on 02 Mar 2012, 02:05 PM
Thank you!
0
Bromcom Development Team
Top achievements
Rank 1
answered on 11 Feb 2013, 01:12 PM
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?
0
Princy
Top achievements
Rank 2
answered on 12 Feb 2013, 05:47 AM
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.
0
Bromcom Development Team
Top achievements
Rank 1
answered on 12 Feb 2013, 11:35 AM
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.
0
Slav
Telerik team
answered on 14 Feb 2013, 08:10 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Bromcom Development Team
Top achievements
Rank 1
answered on 18 Feb 2013, 08:52 AM
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
0
Princy
Top achievements
Rank 2
answered on 18 Feb 2013, 10:29 AM
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
0
Paul
Top achievements
Rank 1
answered on 26 Jan 2016, 10:34 PM

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?

0
Nikolay
Telerik team
answered on 29 Jan 2016, 11:37 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Slider
Asked by
François
Top achievements
Rank 1
Answers by
Slav
Telerik team
Emmanuel
Top achievements
Rank 1
Bromcom Development Team
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Paul
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or