Difference start point of item style and none.

[omer]

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

[Slav]

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

[omer]

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

[Slav]

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

[omer]

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

[Slav]

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