Slider not showing units

9 posts, 0 answers
  1. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 14 Sep 2015 Link to this post

    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

     

  2. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 14 Sep 2015 Link to this post

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 14 Sep 2015 Link to this post

    nvm, I am blind...

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

  5. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 14 Sep 2015 in reply to Mickael Link to this post

    So instead my question is:

    How can I change just the color of the text?

  6. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 14 Sep 2015 in reply to Mickael Link to this post

    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.

     

  7. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 16 Sep 2015 in reply to Mickael Link to this post

    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>

  8. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 16 Sep 2015 in reply to Mickael Link to this post

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

  9. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 17 Sep 2015 Link to this post

    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
  10. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 17 Sep 2015 in reply to Slav Link to this post

    That's exactly what I needed. thanks a :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017