Slider 100-0

8 posts, 0 answers
  1. John
    John avatar
    10 posts
    Member since:
    Oct 2008

    Posted 13 Oct 2008 Link to this post

    Hello,

    How can I have a dual handle slider with vertical orientation use 100 at the top, and 0 at the bottom?  Also, the tooltips when you drag the handles.

    Thanks,
    John
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 13 Oct 2008 Link to this post

    Hi John,
    You can check this online example that demonstrated how you can show a tooltip that displays the current value of the RadSlider while you are dragging the dragHandle.

    Regarding your question about the position of the MinimumValue and MaximumValue - I just answered your support ticket with the same question. I will give the information here as well, so that it is available to all:

    ***

    The behavior you describe is by design. However, I do understand your point of view and because of cases like yours, we have on our TODO list for the RadSlider control, the task to implement an IsDirectionReversed property. When  set to "true", this property will cause the RadSlider to switch the values of its MinimumValue and MaximumValue properties. Unfortunately, this functionality will not be ready for the Futures release, scheduled for this week. We will do our best to implement it for the official Q3 release though. In case it is ready earlier, I can notify you and send you an internal build with the changes.

    Apart from this, you can easily mimic this behavior, using the client API of the control. You can use the following settings:
    1.  MimimumValue = (-100)
    2. MaximumValue = 0

    When you access the value of the RadSlider, simply multiply the value by (-1).

    ***

    Greetings,

    Tsvetie
    the Telerik team

     


    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    10 posts
    Member since:
    Oct 2008

    Posted 13 Oct 2008 Link to this post

    Thank you for replying, unfortunately, that introduces new problems.  When the Min/Max values are set as you suggest, both handles start at the bottom, rather than where SelectionStart/SelectionEnd values are.  Next, the tooltips as you drag the handles are also incorrect and show -negative values.  Lastly, please keep in mind that I also have a horizontal 0-100 slider on the page which works correctly, but calls the same javascript method for onclientvaluechange and onclientslidestart as the vertical slider.

    Please advise.   Thanks again.

    John
  5. John
    John avatar
    10 posts
    Member since:
    Oct 2008

    Posted 13 Oct 2008 Link to this post

    I worked with this some more and was able to get most of it working.  The one big issue I have left is, when it first loads, both handles are at the bottom.  I'd like each handle to start where the SelectionStart and SelectionEnd values are respectively.  I've tried setting properties in OnClientLoaded, but nothing I've tried works, and not sure how to get it to only set that on first load so it maintains dragged locations.

    Thanks for any help,
    John
  6. John
    John avatar
    10 posts
    Member since:
    Oct 2008

    Posted 13 Oct 2008 Link to this post

    Basically, in OnClientLoaded here are the values:

     sender.get_selectionStart(): 0
     sender.get_selectionEnd(): 0
     sender._selectionStart: undefined
     sender._selectionEnd: 0

     MinimumValue="-100" MaximumValue="0" SlideStep="1" SelectionStart="33" SelectionEnd="66"

     

     

     

     

     

  7. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 16 Oct 2008 Link to this post

    -100......0...33..66

    With such a declaration :
    MinimumValue="-100" MaximumValue="0" SlideStep="1" SelectionStart="33" SelectionEnd="66"
    both handlers should have value 0, because 33 and 66 are not between "-100" and "0"

    Probably You want to have something as the following one:
    MinimumValue="-100" MaximumValue="0" SlideStep="1" SelectionStart="-33" SelectionEnd="-66"


    Hope this helps.
  8. John
    John avatar
    10 posts
    Member since:
    Oct 2008

    Posted 16 Oct 2008 Link to this post

    That helps, but now I'm seeing a new issue.  On page load, the top handle starts at the top position (100) of the slider bar, hits OnClientValueChange with a partial page postback, progress spins, comes back, then the top handle finally drops down to the SelectionEnd position (66).  It's only when I use these default values that cause the partial page postback.  If I use say 0, 100, 0, 100 with vertical or 33, 66, 0, 100 with horizontal orientation, no partial page postback on page load.

    Hoping you can help with this, as it looks pretty hokey to have one handle start in one place, wait for the partial page postback to finish, then it drops down.
  9. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 17 Oct 2008 Link to this post

    Hi John,

    I already answered your other thread and for your convenience I pasted my reply below:

    I tested the following code which is similar to your code and everything is working correctly. There is no partial postback when the page is loaded.
    ASPX:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>    
        
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
        <script type="text/javascript">  
            function OnClientSlideStart(slider,args)  
            {    
            }  
            function OnClientValueChange(slider,args)  
            {    
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <div> 
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label> 
        <telerik:RadSlider runat="server" ID="sliderVertical"   
            Orientation="Vertical" 
            IsSelectionRangeEnabled="true"   
            SelectionStart="-33" 
            SelectionEnd="-66"   
            MinimumValue="-100" 
            MaximumValue="0" 
            SlideStep="1" 
            OnClientSlideStart="OnClientSlideStart" 
            OnClientValueChange="OnClientValueChange" 
            AutoPostBack="true"   
            Skin="Telerik" 
            ShowDecreaseHandle="false" 
            ShowIncreaseHandle="false"   
            OnValueChanged="sliderVertical_ValueChanged" ></telerik:RadSlider> 
     
        </div> 
        </form> 
    </body> 
    </html> 
     
    Codebehind:
    protected void Page_Load(object sender, EventArgs e)  
        {  
            Label1.Text +="PageLoad at:" + System.DateTime.Now.ToString() +"<br/>";  
        }  
        protected void sliderVertical_ValueChanged(object sender, EventArgs e)  
        {  
            Label1.Text += "Value changed at:" + System.DateTime.Now.ToString() +"<br/>";  
        } 

    Could you please open a new support ticket and send us a running project where we can observe the problem? Once we receive it we will do our best to help you.

    Regards,
    Petio Petkov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017