ItemType and Slider's graduation mark (line) appearance

6 posts, 2 answers
  1. Igor
    Igor avatar
    5 posts
    Member since:
    Mar 2009

    Posted 09 Oct 2009 Link to this post

    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
  2. Igor
    Igor avatar
    5 posts
    Member since:
    Mar 2009

    Posted 12 Oct 2009 Link to this post

    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-positioncenter center !important; 
      
    /* style for the first item (forces to display ) */ 
    .RadSlider .rslHorizontal .rslItemsWrapper .rslItemFirst 
        background-image:url('Slider/ItemHorizontalBgr.gif') !important; 
        background-positioncenter 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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Oct 2009 Link to this post

    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.
  5. Igor
    Igor avatar
    5 posts
    Member since:
    Mar 2009

    Posted 14 Oct 2009 Link to this post

    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
  6. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Oct 2009 Link to this post

    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.
  7. Igor
    Igor avatar
    5 posts
    Member since:
    Mar 2009

    Posted 19 Oct 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017