How to resize the RadSlider images?

[Pooya]

I've added this RadSlider on my page but it looks too big: http://demos.telerik.com/aspnet-ajax/slider/examples/default/defaultcs.aspx

I saw in the source code that <a> tags are generated for each part and their background-image property is set to an embedded image from the skin.

e.g.

<a id="RadSliderDecrease_RadSlider_NoItems" href="#" class="rslHandle rslDecrease" title="Decrease"><span>Decrease</span></a>

.RadSlider_Vista .rslHorizontal a.rslHandle {

1. background-image: url('/aspnet-ajax/WebResource.axd?d=YKXu0uPqzZODU8Rvlz3vm72tkkulHEpAptoZciRoZVlkUEitZoBEhzYTVh0eCOgf-fLcrTuvnjwnQ_9cFRN5uK_CqhEi4d5EpjV4QZJsc7vML6J0p5rJ5pc0vb-ym1DrvoWxCHvXbRk-MXl6bny980BwLduK0DqLMasbLoyPJ_o1&t=634460641060000000');

}

How would that be possible to resize the RadSlider images to appear e.g. 50% smaller than the default images?

I hope it had a better design and instead had an <img> tag inside the <a> tag so that I could resize them easily.

Thanks,

[Bozhidar]

Hello,

Creating slider with smaller arrows requires some customization for the background image sprites and the CSS file.

Attached is ValidSlider.zip showing a slider with custom (smaller) arrows. This is the way to resize it. There is no <img /> that you could resize, because for the arrows was used background image set through the CSS.

If you like to have several Sliders with several different sized arrows, you should create several custom skins each one with customized sprites and CSS.

You could find useful the following help article: Creating RadSlider Custom Skin

Regards,
Bojo
the Telerik team