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

Slider 100-0

7 Answers 114 Views
Slider
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 13 Oct 2008, 05:57 PM
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

7 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 13 Oct 2008, 07:52 PM
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.
0
John
Top achievements
Rank 1
answered on 13 Oct 2008, 08:14 PM
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
0
John
Top achievements
Rank 1
answered on 13 Oct 2008, 11:46 PM
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
0
John
Top achievements
Rank 1
answered on 14 Oct 2008, 12:03 AM
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"

 

 

 

 

 

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 16 Oct 2008, 02:45 PM
-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.
0
John
Top achievements
Rank 1
answered on 16 Oct 2008, 05:36 PM
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.
0
Petio Petkov
Telerik team
answered on 17 Oct 2008, 08:51 AM
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.
Tags
Slider
Asked by
John
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
John
Top achievements
Rank 1
Obi-Wan Kenobi
Top achievements
Rank 1
Petio Petkov
Telerik team
Share this question
or