Slider without initial selection

11 posts, 0 answers
  1. François
    François avatar
    8 posts
    Member since:
    Jun 2011

    Posted 29 Feb 2012 Link to this post

    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.
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 02 Mar 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Emmanuel
    Emmanuel avatar
    3 posts
    Member since:
    Jan 2011

    Posted 02 Mar 2012 Link to this post

    Thank you!
  5. Bromcom Development Team
    Bromcom Development Team avatar
    5 posts
    Member since:
    Mar 2009

    Posted 11 Feb 2013 Link to this post

    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?
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Feb 2013 Link to this post

    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.
  7. Bromcom Development Team
    Bromcom Development Team avatar
    5 posts
    Member since:
    Mar 2009

    Posted 12 Feb 2013 Link to this post

    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.
  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 14 Feb 2013 Link to this post

    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.
  9. Bromcom Development Team
    Bromcom Development Team avatar
    5 posts
    Member since:
    Mar 2009

    Posted 18 Feb 2013 Link to this post

    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
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Feb 2013 Link to this post

    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
  11. Gary
    Gary avatar
    1 posts
    Member since:
    Mar 2014

    Posted 26 Jan Link to this post

    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?

  12. Nikolay
    Admin
    Nikolay avatar
    64 posts

    Posted 29 Jan Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017