nili/ui
enfaartr
كل المكوّنات

Slider

عرض شامل
٩ تصدير٣ محور تنويع٢٣ خاصيّة٤ ملف
import { Slider, SliderValue } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

مقبض واحد ونطاق

شكل القيمة هو النوع: رقم واحد يرسم مقبضًا واحدًا، و[number, number] يرسم نطاقًا. ولا يمكن تمرير رقم واحد لمنزلق نطاق بالخطأ.

مستوى الصوت40
نطاق السعر20 – 70
import { Slider } from "@nili/ui"

export function Example() {
  const [value, setValue] = useState(40)
  const [range, setRange] = useState([20, 70])

  return (
    <>
      <Slider
        label="Volume"
        value={value}
        onValueChange={setValue}
        showValue
      />

      <Slider
        label="Price"
        value={range}
        onValueChange={setRange}
        showValue
      />
    </>
  )
}

التسمية والتسمية الفرعية والقيمة

تسمّي label المقابض إضافةً إلى ظهورها فوق المسار. ويضع showValue الرقم الحالي بجوارها، ويضيف sublabel سطرًا ثانيًا خافتًا.

Brightness
السطوعالشاشة فقط60
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider label={t('brightness')} defaultValue={60} />
      <Slider label="Brightness" sublabel="Screen only" defaultValue={60} showValue />

      {/* no visible label — name the thumbs instead */}
      <Slider defaultValue={60} thumbLabels={["Brightness"]} />
    </>
  )
}

تلميح

يعرض tooltip القيمة في فقاعة فوق المقبض أثناء السحب — وهو مفيد حين لا مكان لقراءة دائمة.

Opacity
import { Slider } from "@nili/ui"

export function Example() {
  return <Slider label={t('opacity')} defaultValue={75} tooltip />
}

الخطوات والحدود

تتصرّف min وmax وstep كما تتوقّع. ويمنع minStepsBetweenThumbs طرفَي النطاق من التقاطع.

التقييم3
درجة الحرارة20
الميزانية200 – 600
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider label="Rating" min={1} max={5} step={1} defaultValue={3} showValue />
      <Slider label="Temperature" min={-20} max={50} step={5} defaultValue={20} showValue />
      <Slider
        label="Budget"
        min={0}
        max={1000}
        step={50}
        defaultValue={[200, 600]}
        minStepsBetweenThumbs={2}
        showValue
      />
    </>
  )
}

التنسيق

يغيّر formatValue كل رقم يراه المستخدم أو يسمعه، لا الظاهر فقط. وتتبع الأرقام لغة السياق افتراضيًا، فتحصل الواجهة الفارسية على الأرقام الفارسية مجانًا.

التخزين120 غيغابايت
الخصم25%
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider
        label="Storage"
        max={500}
        defaultValue={120}
        showValue
        formatValue={(value) => `${value} GB`}
      />

      <Slider
        label="Discount"
        defaultValue={25}
        showValue
        formatValue={(value) => `${value}%`}
      />
    </>
  )
}

التثبيت والتعطيل

يُطلق onValueChange عند كل خطوة أثناء السحب، بينما يُطلق onValueCommit مرة واحدة عند رفع المؤشّر أو المفتاح. استخدم الثاني لكل ما هو مكلف — فطلب لكل بكسل سحب هو الطريقة المعتادة لإسقاط خادم بمنزلق.

النتائج في كل صفحة20
معطّل40
نطاق معطّل
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider
        label="Results per page"
        defaultValue={20}
        max={100}
        step={10}
        showValue
        onValueCommit={(value) => refetch(value)}
      />

      <Slider label="Disabled" defaultValue={40} disabled />
    </>
  )
}