Customizing the tooltip for the SFSlider

[David Evans]

Do you have examples of customizing the SliderTooltip component? I'm using the SfSlider to get a range of values. The tooltip pops up but I can't change the color of that little pink arrow. I have read the documentation on the regular tooltip component and still could not get the color to change. 

I've uploaded a screenshot to clarify.

Thanks.

Dave

Attachment: SyncfusionSupport_d610fe18.zip

[Sowmiya Padmanaban]

Hi David Evans,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with Slider component. You can change the color of tip pointer of Tooltip component by using CSS styles. 

 

Please, refer to the below CSS styles. 

 

<style> 

    .e-slider-tooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom { 

        color:blue; 

    } 

    .e-slider-tooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom{ 

        border-top:8px solid blue; 

    } 

</style> 

 

Please, refer to the below sample link. 

 

https://www.syncfusion.com/downloads/support/forum/161127/ze/Slider-1111613548.zip 

 

Please, refer to the below links for more details on Slider component. 

 

UG Documentation-https://blazor.syncfusion.com/documentation/range-slider/tooltip/ 

 

Demo link- https://blazor.syncfusion.com/demos/range-slider/tooltip?theme=bootstrap4  

 

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

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P