Customize Slider Ticks Label

[Thomas Woods II]

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]

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

    } 

Sample: https://www.syncfusion.com/downloads/support/forum/147777/ze/Slider-Ticks-540795031 

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

Regards, 

Mohan 

[valentas]

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]

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. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Slider_valueChange132808664.zip 

 

And also, we have included this topic in our documentation for future improvements. 

 

Refer the below links to know about the Slider component. 

 

UG Documentation – https://blazor.syncfusion.com/documentation/range-slider/getting-started/ 

 

Demo link – https://blazor.syncfusion.com/demos/slider/default/ 

 

API Reference- https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html 

 

If we misunderstood your query, can you please share your exact requirement.  

 

Please let us know, if you have any concerns. 

 

Regards,  

Sowmiya.P