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

Implementation Ideas? or lack there of...

6 Answers 73 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 07 Mar 2016, 11:01 PM

Howdy All,

     

6 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 1
answered on 07 Mar 2016, 11:12 PM

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: 937.415.7700 
Toll Free: 877.690.2207
Fax: 937.415.7710
Email: kevin.orcutt@we-ics.com
http://www.we-ics.com
 

 

 

0
Kevin
Top achievements
Rank 1
answered on 07 Mar 2016, 11:13 PM

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

 

0
Kevin
Top achievements
Rank 1
answered on 07 Mar 2016, 11:16 PM
It would also be ok if the "Tickmarks" were either above or below the trackbar...  If that helps any>
0
Accepted
Martin Ivanov
Telerik team
answered on 08 Mar 2016, 11:51 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Martin Ivanov
Telerik team
answered on 08 Mar 2016, 12:50 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kevin
Top achievements
Rank 1
answered on 08 Mar 2016, 03:08 PM

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

Thanks!!!

Kevin Orcutt

Tags
Slider
Asked by
Kevin
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or