Implementation Ideas? or lack there of...

[Kevin]

Howdy All,

     

[Kevin]

Sorry about that... Had Happy fingers the first time...

So here is m problem...  I have a task to implement a slider that appears like what is in the attach .png.  

Any ideas on how I should go about this.  I have generated images for the "Tickmark" diamonds, so I should be able to use a template for those, but I'm not exactly sure on how to do that.... It is not necessary but would be great if I could get the border of the trackbar to change colors across it's range. not sure on how to do that if at all possible...  

So if anyone out there has ANY ideas, it would be greatly appreciated!!!

Thanks in advance,

 

Kevin Orcutt
Senior Software Engineer

Wurth Electronics ICS, Inc.
7496 Webster St., Dayton, OH 45414
Tel: [phone] 
Toll Free: 877.690.2207
Fax: [phone]
Email: [e-mail]
http://www.we-ics.com
 

 

 

[Kevin]

It might help if I attach a file...  Man I'm batting 0-2 today!

 

[Kevin]

It would also be ok if the "Tickmarks" were either above or below the trackbar...  If that helps any>

[Martin Ivanov]

Hello Kevin,

RadSlider doesn't support the desired visualization out of the box. However, you can customize it to achieve similar effect. Basically, you can position labels as the one demonstrated in your attached image using the Ticks collection and the TickTemplate properties of the slider. You can place the above the slider. 

About the color areas of the slider's border, this won't be very straightforward task. To achieve this you can create a custom control that has custom colors behavior and place it in the template of the track element. You can do that through the TrackStyle property of the slider. Another approach could be to place few elements that will represent the border over the slider control and display only their border. You will need to calculate their size based on the ranges between they should be positioned. Also, instead of showing different colored borders you can use the background of the slider's track to annotate the current value.

You can find a sample project attached in my reply which demonstrates a possible approach which you can try. I hope this is a good starting point for achieving your goal.

You can also take a look at the RadProgressBar control and see if it will be suitable for your case. 

Regards,
Martin
Telerik

[Martin Ivanov]

Hello Kevin,

In addition you can use the controls from the RadGauge suite. They allow you to add ranges which you can use to define the colored borders demonstrated in your picture. You can also use custom items. For your case you can use the RadHorizontalLinearGauge control.

Regards,
Martin
Telerik

[Kevin]

Hello Martin,
      I think with what you've provided and a little experimentation, I've come up with a workable solution!  

Thanks!!!

Kevin Orcutt