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

changing the zoom in and out buttons on a slider

5 Answers 145 Views
Slider
This is a migrated thread and some comments may be shown as answers.
andieje
Top achievements
Rank 1
andieje asked on 12 Mar 2008, 09:35 PM
Hi

I want to modify the default slider skin so that the zoom in and out buttons are a plus and a minus sign. I notice the graphics file for the slider buttons has 2 lots of images in them for the: one for when the button is 'inactive', one for when the user clicks the button and one for when the user hovers over the button. There also seems to be a line between each pair of buttons

How would i create a new button for the slider? Presumably there are some 'rules' about the spacing between buttons and the line in the middle. Possibly i have to modify the style sheet if i make the buttons a different size

thanks in advance
andrea

5 Answers, 1 is accepted

Sort by
0
andieje
Top achievements
Rank 1
answered on 12 Mar 2008, 09:37 PM
Hi

I should also point out that my slider is vertical so i would only need to modify the vertical classes in the style sheet

thanks
0
Martin
Telerik team
answered on 20 Mar 2008, 07:22 AM
Hello andieje,

Please, find attached the default skin of RadSlider. You need to modify the vertical classes in order to achieve the desired result.

To use a custom skin, you have to set the EnableEmbeddedSkins="false" and Skin="SkinName" property to the server tag of RadSlider, and then to register the two css files in the <head>...</head> section of your webpage by using the <link> tag.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Martin
Telerik team
answered on 20 Mar 2008, 07:23 AM
Hello andieje,

Please, find attached the default skin of RadSlider. You need to modify the vertical classes in order to achieve the desired result.

To use a custom skin, you have to set the EnableEmbeddedSkins="false" and Skin="SkinName" property to the server tag of RadSlider, and then to register the two css files in the <head>...</head> section of your webpage by using the <link> tag.

You do not have to edit the Slider.css file, as it contains only layout-related properties, not skin-specific ones.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
andieje
Top achievements
Rank 1
answered on 20 Mar 2008, 12:30 PM
Hello

Thanks for your email. However you haven't actually answered the questions I asked. I already know how to modify a default skin or create a custom skin for a prometheus control. I asked some specific questions about the buttons for the slider control. Here they are again.....

I notice the graphics file for the slider buttons has 3 lots of images in them for the: one for when the button is 'inactive', one for when the user clicks the button and one for when the user hovers over the button. There also seems to be a line between button image

How would i create a new button for the slider as it's not just a simple image - it's a composite image? Presumably there are some 'rules' or guidlelines about how to create these composite images. For example, there must be some guidlines about how much spacing to use between the buttons and the line in the middle.

thanks
0
Martin
Telerik team
answered on 24 Mar 2008, 12:19 PM
Hi andieje,

Actually, there are no guidelines on how the images in the "composite" image will be arranged. Their appearance in the html is controlled by css. Basically, you have to stick to the rule that the single image's height and width should be equal to the height and width of the <a /> tag which represents the button itself.

If you have difficulties writing the css, please, send me your images and will write the css for you.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Slider
Asked by
andieje
Top achievements
Rank 1
Answers by
andieje
Top achievements
Rank 1
Martin
Telerik team
Share this question
or