Date Range Slider Customization

[Umair Khan]

Hi syncfusion team!
Below is my figma for the date range slider:


While the below is what I have achieved so far using syncfusion angular:



Issues:
1.  How can I change the colour of slider?
2.  As you can see in my figma, the handles' colour is transparent while it has border colour. How can I achieve it?
3.  The whole slider has some background colour and border (the border only appears when I hover on it else it does not appear). How can I achieve that?

Thanks,

[Prasanth Madhaiyan]

Hi Umair,

Greetings from Syncfusion support.

Based on the shared details, we understand that your requirement is to change the color customization of the Angular Ranger Slider component at your end. To fulfill your requirement, we have attached the Customizing theme color from the theme studio documentation below. Additionally, we have attached the Ranger Slider component style documentation.

Theme Studio documentation: https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio

Range Slider style documentation: https://ej2.syncfusion.com/angular/documentation/range-slider/style

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.