درجه‌ی عمودیِ سطح؛ مایعش دنبالِ مقدار می‌دوه، موقعِ حرکت کج می‌شه و وقتی پر یا خالی می‌شه به دیواره می‌پاشه.

وابستگی‌ها

نوع تعامل

توی حالتِ تعاملی، با کشیدن یا کلیک روی بدنه سطح بالا و پایین می‌ره. اگه از وسطِ دستگیره بکشی نرم و پیوسته جابه‌جا می‌شه؛ اگه جای دیگه بزنی، سطح با فنر به همون‌جا می‌پره. جهتِ کجی از سرعت می‌آد، پس هرچی تندتر بکشی سطح کج‌تر می‌شه. کلیدهای بالا و پایین، Page و Home/End هم کار می‌کنن و Escape کشیدن رو باطل می‌کنه.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import { useState } from "react";
import { SloshGauge } from "@/components/farsify/slosh-gauge";

export function TankLevel() {
  const [level, setLevel] = useState(60);

  return (
    <SloshGauge
      value={level}
      onChange={setLevel}
      interactive
      ariaLabel="سطح مخزن"
    />
  );
}

// فقط نمایش — کاربر نمی‌تواند تغییرش دهد
<SloshGauge defaultValue={72} unit="٪" />

// ارقام لاتین و مایعِ رنگی، با تیکِ بیشتر
<SloshGauge
  defaultValue={45}
  digits="en"
  unit="%"
  ticks={8}
  liquidColor="#007bff"
  glassColor="#1c1c1f"
  width={110}
  height={220}
/>

// بی‌درنگ، بدونِ فنر و پاشش — برای نمایشگری که فقط عدد می‌خواهد
<SloshGauge value={30} interactive viscosity={0} tilt={0} splash={0} />

نکته‌ها

• `digits` فقط متنِ **دیدنی** رو عوض می‌کنه؛ `aria-valuenow` و `aria-valuemin/max` همیشه عددِ خامِ لاتین می‌مونن — صفحه‌خوان‌ها با ارقامِ فارسی بد می‌خونن.
• `viscosity` صفر یعنی فنر کنار می‌ره و سطح یه‌ضرب می‌نشینه؛ برای نمایشگرِ ساده‌ای که فقط می‌خواد عدد رو نشون بده همین رو بذار.
• برای حسی مثلِ آب `viscosity` رو بیار پایین و `splash` رو ببر بالا؛ برای حسی مثلِ عسل برعکس.
• کشیدنِ کنارِ دستگیره نرم‌ه و زدنِ جای دیگه فنری؛ اگه فقط یکی رو می‌خوای، `interactive` رو روشن نگه دار ولی `onChange` رو وصل نکن.
• علامتِ کجی از **جهتِ** سرعت می‌آد، پس با برگشتنِ فنر سطح به سمتِ مخالف کج می‌شه — همین‌ه که بهش حسِ مایع می‌ده.
• با `prefers-reduced-motion` فنر میرا می‌شه (بدونِ پاشش و بدونِ کجی) ولی مقدارِ نهایی همونه؛ برای کاربرِ حساس به حرکت چیزی از دست نمی‌ره.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.