This PR includes the following styling changes to the Slider component:
reduced motion speed
reduced number of slider indicators (desktop and tablet 3 indicators, mobile 4 indicators)
I also included a usePrefersReducedMotion hook which will disable the animation for the users who have system preferences set to Reduce Motion (users who opt out of animation). See here for the article.
Changes
This PR includes the following styling changes to the Slider component:
I also included a
usePrefersReducedMotion
hook which will disable the animation for the users who have system preferences set to Reduce Motion (users who opt out of animation). See here for the article.How to test Reduce Motion?
Enable Reduce Motion settings, and check if the animation is disabled. Otherwise the animation should be enabled. Instruction where to find Reduce Motion settings.
Visuals
Before implementation
After implementation
Reduced motion implementation
https://github.com/ipni/cid.contact/assets/50910606/1ab80a0e-e1fb-43d6-a2c7-061608df2efe