Slider strange shadow and outlines

[olmohake]

Current Behavior

using chrome on iOS 17.6.1 the button of the slider in the form displays a strange shadow:

in the documentation for the slider component the button is displaying 2 outlines while active and 1 afterwards:

Expected Behavior

no shadow & no outlines

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

Just acknowledging I can replicate both issues shown here. I'll be returning to this issue likely over the next week.

Per the Range Input element

We're currently applying the standard .input class to this component, and then refining the styles based on the type. However, this implements overflow:hidden which causes the native shadows on the drag handle to be clipped. So two possible solutions:

1. Exempt overflow styles from the range type input
2. Create a dedicated class specifically for styling these inputs, ex: input-range

NOTE: the former is preferred for ease of use and backwards compatibility.

Per the Skeleton Slider component

Focus states are something we've really struggled with for our Zag-based components. Zag takes a different mental model for how focus states should be handled (using global stylesheets and data attribute selectors), whereas we focus on direct utility classes.

I may group this issues into a larger sweeping audit and update dedicated to fixing known issues with focus states several of our components. This includes Segment.Item and Switch components.

[endigo9740]

Note we'll handle the <Slider> component fixes in this ticket:

• Resolve focus issues affecting multiple components #3030

This ticket will remain open specifically for the input range element styles.