Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Slider > Difference start point of item style and none.

• omer

  Posted on Jan 11, 2012 (permalink)

  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
  

  Attached files

  • itemstyle.gif
  • noneitemstyle.gif

  Reply

• Slav Slav

  Posted on Jan 16, 2012 (permalink)

  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

  Reply


• omer

  Posted on Feb 16, 2012 (permalink)

  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
  
  

  Reply

• Answer Slav Slav

  Posted on Feb 17, 2012 (permalink)

  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 >>

  Reply

• omer

  Posted on Feb 17, 2012 (permalink)

  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
  
  

  Reply

• Slav Slav

  Posted on Feb 21, 2012 (permalink)

  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 >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Slider > Difference start point of item style and none.