This is a migrated thread and some comments may be shown as answers.

Slider not showing units

8 Answers 19 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Mickael
Top achievements
Rank 1
Mickael asked on 14 Sep 2015, 05:25 PM

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

 

8 Answers, 1 is accepted

Sort by
0
Mickael
Top achievements
Rank 1
answered on 14 Sep 2015, 05:28 PM

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

0
Mickael
Top achievements
Rank 1
answered on 15 Sep 2015, 02:04 AM

nvm, I am blind...

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

0
Mickael
Top achievements
Rank 1
answered on 15 Sep 2015, 02:11 AM

So instead my question is:

How can I change just the color of the text?

0
Mickael
Top achievements
Rank 1
answered on 15 Sep 2015, 02:16 AM

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.

 

0
Mickael
Top achievements
Rank 1
answered on 16 Sep 2015, 03:07 PM

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>

0
Mickael
Top achievements
Rank 1
answered on 16 Sep 2015, 03:20 PM

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. :)

0
Slav
Telerik team
answered on 17 Sep 2015, 10:42 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Mickael
Top achievements
Rank 1
answered on 17 Sep 2015, 11:55 AM
That's exactly what I needed. thanks a :)
Tags
Slider
Asked by
Mickael
Top achievements
Rank 1
Answers by
Mickael
Top achievements
Rank 1
Slav
Telerik team
Share this question
or