Liquid Slider

Accessibility

• The glass is a vertical slider with a text value that includes the unit and the goal.
• Low and Full are announced.
• Focus rings the glass in ink.

Motion

• The level rises on a 220 and 26 spring, and the digits roll.
• The surface is 34 small springs that rest when the energy is gone, so no loop runs when idle.
• Dragging bulges the water up to 14 px under the pointer, and bubbles rise.
• Release and keys slosh: the surface tilts with pointer speed and throws three drops.
• Full stamps a badge from .6 on a 500 and 22 spring.
• With reduced motion, the surface is flat, the level steps, and no bubbles rise.

Responsive behavior

• A 120 by 212 glass in a 400 card on Web, and 112 by 202 at full width on Mobile.
• Narrower than 358, the reading moves above the glass.

Performance

• The surface is 34 springs in typed arrays, and the frame loop stops when their energy is gone.
• The water, surface and bubbles are set directly with setAttribute, not through React.
• Rising bubbles run only during a drag, as CSS, and pause offscreen.

• Import LiquidSlider from @/components/fetaui/liquid-slider.
• It defaults to water: 0 to 2000 in steps of 50, in ml. Set label, unit, max and step for anything else.
• max is shown as the goal, and reaching it shows fullText. Below lowAt it shows lowText.
• color takes any CSS color and recolors the water only; the glass stays ink. The docs offer the chart palettes' lead colors: var(--feta-blue-400), var(--feta-violet-400) and var(--feta-orange-400).
• The demo saves nothing. Read onValueChange.