bêta

Slosh Slider `<mv-slosh-slider>`

Un curseur dont le remplissage est liquide : la poignée reste rigide sous votre doigt tandis que le liquide la poursuit sur un ressort souple, cogne contre les butées, s’incline et ondule selon sa vitesse. Un champ de formulaire complet (clavier, ARIA, reset), ou une cuve en orientation verticale.

Catégorie	Formulaires
Type	Web Component (`<mv-slosh-slider>`)
Statut	bêta
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

Agent IA avec le serveur MCP Marvelous UI : install_components({ slugs: ["slosh-slider"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : 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.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<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	Type	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	Type	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.