Vertical Slider from 0 to 100 (like thermometer)

[Edmund Jung]

Hello,

I would like to use the example here:
http://demos.telerik.com/ASPNET/Prometheus/Slider/Examples/Skinning/DefaultCS.aspx

But, I want the slider to perform like a thermometer where the value at the top of the slider is 100 and the value at the bottom is 0.  Is this easily done?

Thanks.

[Svetlina Anati]

Hi Edmund,

What I can suggest is to try to create a custom skin and apply it to the slider in order to achieve the desired outlook of the control. If you could send us some pictures which demonstrate how you would like the web gauge look, we will tell you whether it is possible to achieve it with the slider control. Please, note that the values in the slider are contrariwise - the 0 value is at the top and the 100 value is at the bottom.


Kind regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Edmund Jung]

Thank you.  As for the look or skin, that's not my biggest issue.
I need a vertical slider where when at the top it's value is 100 and at the bottom it's 0.  Plus I will have a textbox that the user can type into.

Looking at this example:
http://demos.telerik.com/ASPNET/Prometheus/Slider/Examples/ValueAndRange/DefaultCS.aspx
I wonder if I could set the MinimumValue = -100 and the MaximumValue  = 0, then program it to take the absolute value?

Could you see this working?

[-DJ-]

Hi Edmund,

As far as I can tell you can easily manage to set it up as you describe apart from the fact that the vertical slider doesn't have any property where you can set it to go from bottom to top and not vice versa.

I did report this as a bug when I submitted my skins in the skins exchange program since it goes against common sense in my humble opinion. If it has such a property, at least I haven't been able to find it.

But, the rest is straightforward:

    Sub SetSlider(ByVal s As Object, ByVal e As EventArgs)
        RadSlider1.Value = txtBox.Text
    End Sub

<telerik:RadSlider ID="RadSlider1" EnableEmbeddedSkins="False" Skin="D10Ruby1" runat="server" Orientation="Vertical" MinimumValue="0" MaximumValue="100" TrackMouseWheel="true" />
<asp:TextBox ID="txtBox" runat="server" /><asp:Button ID="btnSubmit" OnClick="setSlider" Text="Set Slider" runat="server" />

Regards,
-DJ-

[Svetlina Anati]

Hello guys,

Edmund, what I suggested was to create a skin which makes the slider look like it is reversed as Daniel also said he has done.

Another option is to implement a slider with values from -100 to 0 and reverse the values in your code.

We have logged implementing a property which determin whether the slider should be reversed in our database. I cannot tell you when exactly it will be available because there are a lot of tasks with higher priority but we will do our best to include it in our Q3, which is scheduled for the beginning of November.


Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[John]

Hello support,

I have the dual handle slider in vertical mode, but need the top range handle value to start at 100 and the bottom range handle value to start 0.  When I drag the handles, I need the tooltips and the start/end labels on postback update to reflect this correctly.  Currently, the values are reversed and I don't see a way to change this when using a 100-0 range.  It seems to be hardcoded to work with 0-100 range.

Please advise.

Thanks,
John

[Tsvetie]

Hello John,
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).

***

Regards,

Tsvetie
the Telerik team

 

Check out Telerik Trainer, the state of the art learning tool for Telerik products.