How to provide multiple tick collection for both side tick placement?

4 posts, 0 answers
  1. Adnan
    Adnan avatar
    15 posts
    Member since:
    Sep 2013

    Posted 26 Mar Link to this post

    Setting Tick Placement property of rad slider control to Both value, is there any way to provide multiple tick collection to be assigned for each side. For example, I want the TOP tick placement to to take the values from 10 to 0, while the Bottom tick placement should take the values from 0 to 10.

    If this is not possible or it is too complicated to achieve this goal with RadSlider control, then, what is the most appropriate control to achieve this?

    Thanks in advanced.
  2. Dinko
    Admin
    Dinko avatar
    415 posts

    Posted 29 Mar Link to this post

    Hello Adnan,

    Thank you for your interest in RadSlider control.

    By default, the Ticks collection of the RadSlider is the same for the top and bottom labels of the slider. Setting different values of the top and bottom labels is not supported by the control out of the box. In your case you want the top to be displayed from 0 to 10, in this case, the slider is expecting the minimum to be less than the maximum.  Basically, you can use a custom class IValueConverter class to reverse the bottom labels depending on the top. 

    For your convenience, we have created sample project which demonstrates an approach to reverse the bottom labels. Give this project a try and let us know if it works for you.

    Regards,
    Dinko
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Adnan
    Adnan avatar
    15 posts
    Member since:
    Sep 2013

    Posted 30 Mar in reply to Dinko Link to this post

    Hi Dinko,

    Thanks for the provided project, I guess this approach will solve the UI problem, but it does not provide a way to differentiate and access the selected top and bottom values since you have only one tick collection to read the selected value from. It would be great to provide this functionality also.

    Regards, 
  4. Dinko
    Admin
    Dinko avatar
    415 posts

    Posted 04 Apr Link to this post

    Hello Adnan,

    In addition to my first reply.

    You can try setting the IsDirectionReversed property of the RadSlider to True. You can take a look at the Direction help article in our documentation where this property is described. This way you can reverse the top tick placement values from 10 to 0 and use IValueConverter to set the bottom tick placement values from 0 to 10. For your convenience, I have modified the project from my last reply to demonstrate this approach give it a try and let me know if it works for you.

    As for your second question.

    You can try creating a reverse collection of the slider double collection. Then you can subscribe to the ValueChanged event of the RadSlider. In the event handler, you can get the index of the selected value in the slider collection and use the same index to get the value of the second collection which represent the bottom values. The attached project demonstrates this approach.

    Regards,
    Dinko
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top