ItemType and Slider's graduation mark (line) appearance

[Igor]

Hello, Telerik support team!

Could you describe me how to solve a problem I have please.
I have an RadSlider on the web page. When its ItemType property is set to "Item", I can't force the Drag handle to be placed directly on graduation marks. It's possible only if ItemType property is set to "Tick", but I can't use slider so.
How can I force Drag handle to be displayed only on graduation line(s) instead of between of them?

Take a look at the attached png file with some description please.

Thank you a lot.
Igor Soloydenko

[Igor]

Now I am trying to solve this problem using style sheets.
For example I changed next CSS for displaying the graduation mark (line) exactly under the value item.

See result view in the attached file.

/* horizontal slider items */
.RadSlider .rslHorizontal .rslItem
{
    background-image:url('Slider/ItemHorizontalBgr.gif');
    background-position: center center !important;
}

/* style for the first item (forces to display ) */
.RadSlider .rslHorizontal .rslItemsWrapper .rslItemFirst
{
    background-image:url('Slider/ItemHorizontalBgr.gif') !important;
    background-position: center center !important;
}

So, all is O.K. now except of one thing. The slider is too wide now. I want to cut its sides to improve appearance. In fact it is the demand of designer.
How can I do it? Style-based solution seems to be too hard. Because there are some JavaScript responsible for Drag handle positioning. It can make me troubles.

Any help will be appreciated!

[Tsvetie]

Hi Igor,
You cannot achieve this. The main problem is that the items have the same width and in your screenshot, the width of the first and last items is less than that of the middle items. I have attached an image that outlines the items in the slider you what to get. The items of type "Item" are equal in size and this cannot be changed. You can easily position the mark for the first and last item as in the screenshot, however, you cannot change their width and as a result, the space between the first and second mark will be different (bigger) than the space between the second and third mark.

Regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Igor]

Thank you for reply, Tsvetie!
Do you mean that there is no way to decrease the width of slider at all Or I can use some tricks (or even black magic :D) to achieve this effect?
Taking in account your explanation I can try to use other images for first and last Items in slider by applying specific css styles (or classes). The width of these items (and the whole slider) will be the same. But user will see the picture I need. This method is alike to "sprites" method used in old games.

Thank you a lot.
Igor Soloydenko

[Tsvetie]

Hi Igor,
To your first question - you can easily change the width of the RadSlider control using the Width property. However, you do not want to do this, you actually want to cut off a part of the RadSlider - and yes, this is not possible.

To your second question - yes, you can use different images for the first and last slider items as these two have specific CSS classes - rslItemFirst and rslItemLast.

Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Igor]

Thank you for details, Tsvetie!
Yes, surely I meant the width of slider's item not slider itself.
Ok, I'll try to solve the task using tricky images.