Problem description

Given HTML markup with an <input type="range"> element inside a container, write CSS to:

• Remove the default browser appearance of the slider.

• Style the slider track (::-webkit-slider-runnable-track/::-moz-range-track) as a semi-transparent backdrop (rgba(255,255,255,0.2)) with backdrop-filter: blur(6px) and rounded corners.

• Style the slider thumb (::-webkit-slider-thumb/::-moz-range-thumb) as a circular handle with rgba(255,255,255,0.4), backdrop-filter: blur(4px), shadow, and a hover effect that increases opacity.

• Ensure the thumb is vertically centered on the track and the component is responsive.

Goal

Write CSS rules to fully customize the range input’s appearance, creating a cohesive glassmorphic UI control with intuitive feedback on hover and focus.

Constraints

• Use only CSS (no JavaScript).

• Center the slider container horizontally and vertically.

• Track height should be 8px; thumb diameter should be 20px.

• Use backdrop-filter for blur effects on both track and thumb.

• Provide :hover and :focus states on the thumb to increase its background opacity.

• Support modern WebKit and Gecko browsers using appropriate pseudo-elements.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.