یه لغزنده که از میله‌های باریک ساخته شده؛ با کشیدن، موجی از ارتفاع توش راه می‌افته و ردِ حرکت رو نشون می‌ده.

وابستگی‌ها

نوع تعامل

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

پراپ‌ها

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

نصب

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

نمونه

"use client";

import { useState } from "react";
import { WakeSlider } from "@/components/farsify/wake-slider";

export function VolumeLevel() {
  const [level, setLevel] = useState(50);

  return (
    <WakeSlider
      value={level}
      onChange={setLevel}
      ariaLabel="سطح صدا"
      showValue
    />
  );
}

// موجِ بلندتر و حسی سنگین‌تر
<WakeSlider
  defaultValue={30}
  bars={48}
  height={72}
  reach={12}
  sensitivity={1.6}
  glide={0.18}
  fillColor="var(--color-brand)"
/>

نکته‌ها

• موجِ بلند می‌خوای؟ `reach` و `sensitivity` رو با هم بالا ببر — تنها یکی از اون‌ها اثرِ کمی داره.
• برای حسِ «سنگین‌تر» `glide` رو بیار پایین؛ برای حسِ «تند و چابک» بالاش ببر.
• روی گوشی، ۳۲ میله با هم رندر می‌شن؛ اگه جایی کند شد `bars` رو کم کن.

مجوز

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