لغزنده‌ای که زیرِ نشانگر ضخیم می‌شه و اگه از دو سر بیرون بکشی مثلِ کشِ لاستیکی کشیده می‌شه و با فنر برمی‌گرده.

وابستگی‌ها

نوع تعامل

روی نوار بکش یا کلیک کن؛ نوار زیرِ انگشت ضخیم می‌شه و اگه از هر سر بیرون بکشی، کشیده می‌شه و بعد با فنر برمی‌گرده. توی راست‌به‌چپ نوار از **راست** پر می‌شه و کلیدهای جهت هم آینه‌ان (چپ = بیشتر)؛ توی حالتِ عمودی از پایین پر می‌شه. با چرخِ ماوس (اگه `wheel` روشن باشه) و کلیدهای Home/End هم می‌شه مقدار رو عوض کرد.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import { useState } from "react";
import ElasticSlider from "@/components/farsify/elastic-slider";

export function VolumeControl() {
  const [level, setLevel] = useState(64);

  return (
    <ElasticSlider
      value={level}
      onChange={setLevel}
      ariaLabel="میزان صدا"
    />
  );
}

// پر شدنِ دوطرفه: از وسط بازه رشد می‌کند و دستگیره دارد
<ElasticSlider
  defaultValue={0}
  startingValue={-100}
  maxValue={100}
  fillFrom={0}
  thumb
  valuePosition="bubble"
  rangeColor="var(--color-brand)"
/>

نکته‌ها

• توی راست‌به‌چپ نوار از راست پر می‌شه؛ کلیدِ چپ «بیشتر»ـه. همین قرارداد توی `wake-slider` هم هست.
• برای پر شدنِ دوطرفه (مثلِ نوردهیِ دوربین) `fillFrom` رو وسطِ بازه بذار و `thumb` رو روشن کن.
• برای آیکنِ داخل، `thickness` رو حدودِ ۴۰px ببر؛ وگرنه آیکن‌ها توی نوارِ نازک بریده می‌شن.
• با `ticks={[0]}` فقط نقطه‌ی صفر رو نشون می‌دی؛ `ticks` عددی همه‌ی پله‌ها رو می‌آره.
• اگه روی صفحه‌ای چرخِ ماوس باید صفحه رو اسکرول کنه، `wheel` رو خاموش بذار (پیش‌فرض).

مجوز

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