Slider not showing units

[Mickael]

Hi,

I have a slider declared as follow:

 

<telerik:RadSlider
    ID="RdSldr_Threshold"
    runat="server"
    ItemType="Tick"
    MinimumValue="10"
    MaximumValue="100"
    LargeChange="10"
    Orientation="Vertical"
    TrackPosition="Center"
    Height="200px"
    Width="70px"
    AnimationDuration="100"
    ThumbsInteractionMode="Free"
    EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false"
    EnableServerSideRendering="true">
</telerik:RadSlider>

 With this declared before:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnablePageMethods="true" EnablePartialRendering="true" />

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    <StyleSheets>
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Slider.css" />
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Slider.Default.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>

The problem is that while the slider renders properly, I see not ticks on the side of it.

 Any idea what causes this?

This is a pretty urgent issue for us.

Thanks

 

[Mickael]

I also have the following in the header:

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>' rel="stylesheet" type="text/css" />
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Default.Slider.Default.css") %>' rel="stylesheet" type="text/css" />

[Mickael]

nvm, I am blind...

The color of the text is so close to the color of my background that I could not distinguish them.

[Mickael]

So instead my question is:

How can I change just the color of the text?

[Mickael]

Also, how can I center the slider ?

I defined it as such:

<div style="display: table-cell; text-align: center; width: 100%; background-color:blue;">
    <telerik:RadSlider
        ID="RdSldr_Threshold"
        runat="server"
        ItemType="Tick"
        Value="50"
        MinimumValue="10"
        MaximumValue="100"
        SmallChange="5"
        LargeChange="10"
        Orientation="Horizontal"
        TrackPosition="Center"
        Height="50px"
        Width="400px"
        AnimationDuration="100"
        ThumbsInteractionMode="Free"
        EnableServerSideRendering="true"
        OnClientValueChanged="RdSldr_Threshold_ValueChange"
        OnClientLoad="RdSldr_Threshold_ValueChange">
    </telerik:RadSlider>
</div>

 Yet it does not center horizontally in the blue div as you can see in the screenshot.

 

[Mickael]

So I answered my second question about centering the slider.

I simply put it inside another div with display set to inline-block 

<div style="display: table-cell; text-align: center;  width: 100%; ">
    <div style="display:inline-block;">
        <telerik:RadSlider
            ID="RdSldr_Threshold"
            runat="server"
            ItemType="Tick"
            Value="50"
            MinimumValue="5"
            MaximumValue="100"
            SmallChange="5"
            LargeChange="10"
            Orientation="Horizontal"
            TrackPosition="Center"
            Height="50px"
            Width="400px"
            AnimationDuration="100"
            ThumbsInteractionMode="Free"
            EnableServerSideRendering="true"
            OnClientValueChanged="RdSldr_Threshold_ValueChange"
            OnClientLoad="RdSldr_Threshold_ValueChange">
        </telerik:RadSlider>
    </div>
</div>

[Mickael]

So the only question remaining is:

 How can I change the color of the tick text?

 I looked around the forum and could not find anything about it.

Some help would be really welcomed. :)

[Slav]

Hello Mickael,

You can override the styles of RadSlider in order to change the color of the tick text. I prepared a sample page that shows how this can be achieved.

Regards,
Slav
Telerik

[Mickael]

That's exactly what I needed. thanks a :)