We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize Slider Ticks Label

Is it possible to customize the tick labels so that I can show something like Time or Grades as it shows on the main website? If so how, can you provide an example of a slider using custom tick labels with grade levels (e.g. K4, K5, 1, 2, 3, etc).


3 Replies

MR Mohan Ravi Syncfusion Team September 24, 2019 11:30 AM UTC

Hi Thomas, 

Thanks for using Syncfusion products. 

You can customize the Slider Ticks label using ‘TicksRendering’ event which will provide current value and text for the tick it is currently rendering as an argument. Now you can do your own logic and finally assign you custom value in ‘Text’ property of the given argument to customize that particular tick like below. 

void TicksRendering(SliderTickEventArgs eventArgs) 
        if (eventArgs.Value == 0) 
            eventArgs.Text = "K4"; 

Please check the above sample and if you have any other queries feel free to contact us again. 


VA valentas April 21, 2020 08:47 AM UTC

Omg. I searched everywhere. Official documentations, references, essiancial studio, online examples, google, but i couldnt find how to archive that month slider from official page. Only here in forum i found this way to do it.
Please please include how to archive month slider in help https://blazor.syncfusion.com/documentation and maybe to official sample
Now i know but it could help to other.

SP Sowmiya Padmanaban Syncfusion Team April 22, 2020 10:09 AM UTC

Hi Valentas,  
Greetings from Syncfusion support. 
We have checked your requirement for time slider. In Slider component, we have provided a support for customizing Slider with date and time functionality. For your reference, we have prepared a sample for time slider. In that sample, you can set the range value of Slider in the double format. Similarly, you can customize the slider based on your requirement. 
Refer the below code snippet. 
<div style="width:700px"> 
    <SfSlider TValue="int[]" Min="MinValue()" Max="@MaxValue()" Type="SliderType.Range" Value="SliderValues"> 
        <SliderEvents TValue="int[]" OnTooltipChange="@TooltipChange" TicksRendering="@TickesRendering"></SliderEvents> 
        <SliderTicksData Placement="Placement.Before" LargeStep="7200000" SmallStep="3600000" ShowSmallTicks="true"></SliderTicksData> 
        <SliderTooltipData Placement="TooltipPlacement.After" IsVisible="true"></SliderTooltipData> 
    int[] SliderValues = new int[] { 43200000, 54000000 }; 
    public double MinValue() 
        DateTime dt = new DateTime(2013, 6, 13, 11, 0, 0); 
        return dt.TimeOfDay.TotalMilliseconds; 
    public double MaxValue() 
        DateTime dt = new DateTime(2013, 6, 13, 23, 0, 0); 
        return dt.TimeOfDay.TotalMilliseconds; 
    public void TickesRendering(SliderTickEventArgs args) 
        double time = args.Value / 3600000; 
        if (time > 11) 
            args.Text = time + ".00 PM"; 
            args.Text = time + ".00 AM"; 
    public void TooltipChange(SliderTooltipEventArgs<int[]> args) 
        double FirstValue = args.Value[0] / 3600000; 
        double SecondValue = args.Value[1] / 3600000; 
        if (FirstValue <= 11 && SecondValue < 11) 
            args.Text = FirstValue + ".00 AM -" + SecondValue + ".00 AM"; 
        else if (FirstValue <= 11 && SecondValue > 11) 
            args.Text = FirstValue + ".00 AM -" + SecondValue + ".00 PM"; 
        else if (FirstValue > 11 && SecondValue > 11) 
            args.Text = FirstValue + ".00 PM -" + SecondValue + ".00 PM"; 
Refer the sample link below. 
And also, we have included this topic in our documentation for future improvements. 
Refer the below links to know about the Slider component. 
If we misunderstood your query, can you please share your exact requirement.  
Please let us know, if you have any concerns. 

Live Chat Icon For mobile
Up arrow icon