Beta

Slosh Slider `<mv-slosh-slider>`

Ein Slider mit flüssiger Füllung: Der Griff bleibt unter deinem Finger starr, während die Flüssigkeit ihm an einer weichen Feder nachjagt, gegen die Endanschläge stößt, sich neigt und mit ihrer Geschwindigkeit kräuselt. Ein vollständiges Formularfeld (Tastatur, ARIA, Reset) oder, vertikal, ein Tank.

Kategorie	Formulare
Typ	Web Component (`<mv-slosh-slider>`)
Status	Beta
Keywords	slider, range, liquid, physics, spring, gauge, tank, form-associated, tactile

When to use

A playful or tactile product wants a slider whose liquid fill reacts to drag speed
A level such as volume, water intake or a fill ratio reads well as a vertical tank
A marketing or onboarding page wants a memorable form control that still submits a value

Avoid when

A dense settings screen needs a sober slider, two thumbs or labeled tick marks → use Slider instead
Another expressive style fits better, like a wave, ruler or value bubble → use Range FX instead
Many sliders appear on one page; the per-slider spring physics adds noise and cost

Installation

node scripts/add.mjs slosh-slider --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["slosh-slider"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/form.js, core/motion.js, core/observe.js, components/slosh-slider/slosh-slider.js, components/slosh-slider/slosh-slider.css.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<form id="mv-slosh-slider-demo" style="display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 2.5rem;align-items:end;width:100%;max-width:640px">
  <div style="display:grid;gap:1.4rem">
    <mv-slosh-slider label="Volume" name="volume" value="64" suffix="%"></mv-slosh-slider>
    <mv-slosh-slider label="Monthly budget" name="budget" min="0" max="2000" step="50" value="850" prefix="$" slosh="0.85" style="--mv-slosh-slider-color:var(--mv-success);--mv-slosh-slider-color-2:color-mix(in oklch,var(--mv-success),black 15%)"></mv-slosh-slider>
    <mv-slosh-slider label="Brightness (classic)" name="brightness" value="30" suffix="%" slosh="0" style="--mv-slosh-slider-height:1.75rem"></mv-slosh-slider>
  </div>
  <mv-slosh-slider label="Tank" name="water" orientation="vertical" value="70" suffix=" L" max="120" slosh="0.9" style="--mv-slosh-slider-color:var(--mv-info);--mv-slosh-slider-color-2:color-mix(in oklch,var(--mv-info),black 22%)"></mv-slosh-slider>
  <div style="grid-column:1/-1;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap">
    <button class="mv-button" data-size="sm" type="submit">Submit</button>
    <button class="mv-button" data-size="sm" data-variant="outline" type="reset">Reset</button>
    <output id="mv-slosh-slider-demo-out" style="font-size:.8rem;color:var(--mv-fg-muted)"></output>
  </div>
</form>
<script type="module">
  const form = document.getElementById("mv-slosh-slider-demo");
  const out = document.getElementById("mv-slosh-slider-demo-out");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    out.textContent = [...new FormData(form)].map(([k, v]) => `${k} = ${v}`).join(" · ");
  });
</script>

API

Attributes

Name	Typ	Default	Description
`label`	string		Visible label (and accessible name).
`name`	string		Form field name.
`value`	number		Initial value (also used on reset).
`min / max / step`	number	`0 / 100 / 1`	Bounds and step (the step sets the displayed precision).
`slosh`	number	`0.6`	Inverse viscosity: 0 = classic slider, 1 = very fluid liquid (softer, less damped).
`orientation`	horizontal \| vertical	`horizontal`	vertical: a tank that fills from the bottom, with a sloshing horizontal surface.
`prefix / suffix`	string		Text around the displayed and announced value (e.g. suffix="%").
`hide-value`	boolean		Hides the displayed value (it is still announced).
`disabled / required`	boolean		Form states (a disabled fieldset is respected).

Properties

Name	Typ	Description
`value`	string	Value (a string, like an input).
`valueAsNumber`	number	Numeric value.

Events

Name	Description
`input`	On every change while dragging or using the keyboard.
`change`	On release or after a key press.

CSS variables

Name	Default	Description
`--mv-slosh-slider-color / --mv-slosh-slider-color-2`	`accent / darkened accent`	Liquid gradient.
`--mv-slosh-slider-track`	`var(--mv-bg-muted)`	Tube background.
`--mv-slosh-slider-height`	`2.75rem`	Thickness of the horizontal tube.
`--mv-slosh-slider-width / --mv-slosh-slider-length`	`4.75rem / 12rem`	Size of the vertical tank.
`--mv-slosh-slider-radius`	`full (2xl when vertical)`	Tube radius.
`--mv-slosh-slider-ratio`		Set by the component: position 0..1, for styling around it.

Accessibility

role=slider on the tube (focusable), aria-valuemin/max/now and formatted aria-valuetext; ←/→/↑/↓ (Shift ×10), Page↑/↓, Home/End. Form-associated (ElementInternals): submitted value, reset, disabled fieldset, <label for>. The liquid is decorative (SVG aria-hidden). Reduced motion: instant fill, no ripples.