skinning a slider

2 posts, 0 answers
  1. andieje
    andieje avatar
    473 posts
    Member since:
    Oct 2006

    Posted 08 Mar 2008 Link to this post


    I need to write a custom skin for a rad slider. I have downloaded prometheus and installed the documentation. There is a section called advanced skinning which points here


    but this page contains no information.

    Is there any documentation to explain the html structure of the slider like there is for the other rad controls?

  2. Ubong
    Ubong avatar
    328 posts

    Posted 11 Mar 2008 Link to this post

    Hello Andieje,

    To help you clear things up, I am providing a sample app with a Custom Skin: "Vista" applied for the Slider Prometheus control. The easiest way to create a custom skin is to use an already exsting one and rename/modify it.
    Let's say you want to use a custom Vista Skin like I did. What you simply do is:
    1. Copy the "Vista" folder you want from "C:\Program Files\Telerik\RadControls 'Prometheus' for ASPNET\Skins" into your application folder/root folder. You will see this contains a css file called Slider.Vista.css.
    2. Open the copied Vista folder in your app and find the Slider.Vista.css file I mentioned earlier. Then drag-and-drop the CSS file into the head tag of your aspx page. You should end up with the following HTML that registers the css file:

        <link href="Vista/Slider.Vista.css" rel="stylesheet" type="text/css" /> 

    3. Set the Skin property of your RadSlider control in your aspx page to "Vista". Then set the EnableEmbeddedSkins property to false. ie:

      <telerik:RadSlider ID="sldr1" Skin="Vista" EnableEmbeddedSkins="false" runat="server" /> 
    4. Your'e ready to go!
      You can rename the css files and Skin folders, delete those you don't need and reference those you need as you desire.

    Useful links for reference:


    the Telerik team

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