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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize Slider Ticks Label

Thread ID:

Created:

Updated:

Platform:

Replies:

147777 Sep 23,2019 08:52 PM UTC Apr 22,2020 10:09 AM UTC Blazor 3
loading
Tags: Range Slider
Thomas Woods II
Asked On September 23, 2019 08:52 PM UTC

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

Thanks

Mohan Ravi [Syncfusion]
Replied On 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. 

Regards, 
Mohan 


valentas
Replied On 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.

Sowmiya Padmanaban [Syncfusion]
Replied On 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> 
    </SfSlider> 
</div> 
 
 
@code{ 
    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"; 
        } 
        else 
        { 
            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. 
 
Regards,  
Sowmiya.P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon