Skeuomorphic Snowball Range Slider

This is a Skeuomorphic Snowball Range Slider. It re-imagines the standard HTML range input as a photorealistic physical object. Its function is to provide a highly tactile and playful interface where the slider’s thumb appears as a snowball, complete with a dynamic snow texture that seems to “roll” and cast realistic environmental shadows as it moves along its track.

Specs

• Weight: ~3 KB. No external libraries are used for the core logic.
• Performance: High. The entire component is driven by a single CSS custom property (--ball-x), and the visual updates are handled by hardware-accelerated CSS transform and box-shadow.
• Theming / Customization: The colors for the track and background are set via HSL values, making them easy to adjust. The snow texture is an external image but can be replaced.
• Responsiveness: Fluid. Uses a dynamic root font-size and relative em units, allowing the entire slider to scale proportionally with the viewport.
• Web APIs: Web Animations API.
• Graceful Degradation: The underlying element is a semantic <input type="range">. If CSS fails, it reverts to a native browser slider. Without JavaScript, the visual snowball handle won’t move, but the underlying input can still be manipulated.

Anatomy

The component uses an invisible native slider to control a complex, layered visual proxy.

• HTML (The Skeleton): A .range container wraps an <input type="range"> and a series of div elements that make up the visual components: .range__tip (value display), .range__track (the groove), and .range__ball (the snowball).
• CSS (The Skin): The native input is made transparent. The .range__ball and its children (__inner-shadow, __outer-shadow, etc.) use multi-layered box-shadow and filter: blur() to create a convincing 3D sphere.
• JS (The Nervous System): A minimalist TypeScript class (SnowballRangeSlider) that attaches an input event listener. On input, it calculates the handle’s percentage position and updates the --ball-x CSS variable on the parent element.

Logic

The standout technical feature is the Dynamic Texture Mapping Illusion.

.range__ball-texture:before {
  background: url(...) 0 0 / 20% 100%;
  width: 500%;
  height: 100%;
  transform: translateX(calc(50% * var(--ball-x)));
}

Instead of trying to rotate a 3D sphere, the developer creates an illusion of rolling. A wide background image (500% width) containing a repeating snow texture is placed inside the circular .range__ball-texture container (which has overflow: hidden). As the user drags the slider, the --ball-x variable changes from 0 to 1. The transform: translateX() property then shifts this wide texture horizontally inside the “window” of the snowball. This makes it appear as though the texture on the snowball’s surface is rotating as it rolls along the track.

Feel

Tactile, physical, and deeply skeuomorphic. The layered shadows make the snowball and track feel like real, three-dimensional objects with mass and depth. The way the snow texture shifts as you drag gives the interaction a satisfying sense of physical friction. The value tip, which floats above the snowball, provides clear, immediate feedback without cluttering the control itself. It feels less like a form element and more like a beautifully crafted physical toy.