Can we modify the look and feel of the trackbar

[Barkha]

Hi All,

I have a requirement to have a track bar which should be a straight line and the slider should be round in shape.
Currently the track bar provide scales and the slider is rectangular.
Is there any way to change the appearance of the trackbar?

Thanks again in advance for your help.

-Barkha

[Nikolay]

Hello Barkha,

Thank you for this question.

Yes, you can modify the look and feel of RadTrackBar. You can achieve the described look by following these steps:

    1. Create an instance of the RadTrackBar by dragging it from the toolbox to your form.
    2. From its Smart Tag menu, open Visual Style Builder.
    3. Give your theme a name in the Theme Name field.
    4. In the Control Structure panel choose RadTrackBarElement, then its properties are shown in the Expert Mode panel.
    5. Set the ShowTicks property  to False.
    6. Then, navigate to TrackBarThumb's BorderPrimitive using the Control Structure panel. The corresponding properties will show in the Expert Mode panel.
    7. Set the Visibility property to either Hidden or Collapsed.
    8. Again, from the Control Structure panel, choose TrackBarThumb's FillPrimitive, then from the Shape property you can choose the desired Thumb form.
    9. From the Visual Style Builder menu choose File, then Save Theme As and save it as a file and then close it.
    10. Add new RadThemeManager to your project, open its Smart Tag and choose Load Theme from file, navigate and choose your new theme file.
    11. From your RadTrackBar property panel, set the Theme Name property to the name of your new theme.

That is it, now you have your custom RadTrackBar look. We have attached a sample application that illustrates the steps above.

If we could be of further assistance, do not hesitate to contact us.

Best wishes,
Nikolay
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Barkha]

Thanks Nikolay.

Your inputs were very valuable to me. I have attached the TrackTheme.xml that I am using as a theme to change the trackbar style.
Only small thing that i am not able to achieve is to darken and thicken the inner line on which the thumb is sliding.
Can you please help me on that.

Thanks
-Barkha

[Nikolay]

Hi Barkha,

We are glad to help you again.

It is pretty easy to change the look of the RadTrackBar's inner line. Considering the steps mentioned before, while working in Visual Style Builder, you should also follow these:

    1. Choose RadTrackBarElement in the Control Structure panel.
    2. Then, in the Expert Mode panel, navigate to the SliderAreaWidth property. Changing its value will impact the inner line width
    3. Next, to darken the color of this line, or to give it any color you want, just change the SliderAreaGradientColor1 and SliderGradientColor2 properties.

We have attached a sample theme that shows the final result of all the steps mentioned.

If you have any further questions, please do not hesitate to write us back.

Sincerely yours,

Nikolay
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center