Difference start point of item style and none.

6 posts, 1 answers
  1. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 11 Jan 2012 Link to this post

    Hello!

    i've 3 slider in my page. 1 is none item style and two others are with item style.
    with item style "none", drag handle starting exactly from first point of track. but with item style draghandle starting between middle of the first and second tick  place of slider. (you can check from attachament.) i want that, all of my my slider are displaying same size. (width and height) and starting from same place even i selected "item" style..is it possible? 

    Regards
    Omer
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 16 Jan 2012 Link to this post

    Hello Omer,

    You can ensure that the RadSliders in your page have the same size by setting equal values in their properties Width and Height.

    As for the position of the drag handle, by design it is centered when Items are used in the RadSlider. The starting position of the handle could be changed by referencing its rendered HTML element via JavaScript and modifying its CSS properties. You can check this help article for more information on the rendering of the RadSlider control, so that you can select the items to modify. In the article RadSlider Client Object you can find a list of client methods that will help you reference the components of the slider control via JavaScript. Please keep in mind that such a modification of the RadSlider is out-of-the-box and could lead to an unexpected behavior.

    Regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 16 Feb 2012 Link to this post

    Thansk for reply.
    i tried to change style of the div via java script. but did not work. 

     document.getElementById('id1').style 

    is it possible to set only css class like this?

    RadSliderDrag_RadSlider2.rslDraghandle 
    left: 0px;

    (this element by default rendering left: 10px)

    can you provide draft example?

    Kindly Regards

    Ömer

  5. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 17 Feb 2012 Link to this post

    Hello Omer,

    Below I have provided a custom CSS class that will place the drag handle of  RadSlider with Items at the left end of the control's track. It will also remove the selected region from the track as the drag handle will not be centered in the item. In order to apply this class to the RadSlider control, you can set it to its property CssClass.
    <style type="text/css">
        .CustomRadSlider .rslHorizontal a.rslDraghandle
        {
            left: 0 !important;
        }
         
        .CustomRadSlider .rslHorizontal .rslSelectedregion
        {
            width: 0 !important;
        }
    </style>

    <telerik:RadSlider runat="server" ID="RadSlider1" ItemType="Item" CssClass="CustomRadSlider">
        <Items>
            ...
        </Items>
    </telerik:RadSlider>

    Kind regards,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 17 Feb 2012 Link to this post

    but if slider is range slider and there is two different handles 
    Css have to set like this.

     RadSliderDrag_RadSlider2 .rslHorizontal a.rslDraghandle
        {
            left: 0 !important;
        }

    Regards

  7. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 21 Feb 2012 Link to this post

    Hi Omer,

    Indeed, if Selection Range is enabled for the RadSlider control (the property IsSelectionRangeEnabled is set to true), the CSS style for clearing the selected region will not be necessary.

    Kind regards,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017