Vertical Slider from 0 to 100 (like thermometer)

7 posts, 0 answers
  1. Edmund Jung
    Edmund Jung avatar
    17 posts
    Member since:
    Jun 2006

    Posted 13 Sep 2008 Link to this post

    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.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Sep 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Edmund Jung
    Edmund Jung avatar
    17 posts
    Member since:
    Jun 2006

    Posted 16 Sep 2008 Link to this post

    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?
  5. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 17 Sep 2008 Link to this post

    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 ObjectByVal 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-
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Sep 2008 Link to this post

    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.
  7. John
    John avatar
    10 posts
    Member since:
    Oct 2008

    Posted 09 Oct 2008 Link to this post

    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
  8. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 13 Oct 2008 Link to this post

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