FieldSlider() — ui Function Reference

Architecture documentation for the FieldSlider() function in field-slider.tsx from the ui codebase.

Function tsx Internationalization Dictionary calls 1

Entity Profile

Internationalization→ Dictionary→ FieldSlider() — ui Function Reference

Dependency Diagram

graph TD
  24fe0590_09d4_6c55_dc08_b0b9558083a0["FieldSlider()"]
  3ac85df4_c61a_148b_ad7e_8046ad3db6ee["field-slider.tsx"]
  24fe0590_09d4_6c55_dc08_b0b9558083a0 -->|defined in| 3ac85df4_c61a_148b_ad7e_8046ad3db6ee
  ad186899_4a7f_bf60_b939_86f910aa5424["formatNumber()"]
  24fe0590_09d4_6c55_dc08_b0b9558083a0 -->|calls| ad186899_4a7f_bf60_b939_86f910aa5424
  style 24fe0590_09d4_6c55_dc08_b0b9558083a0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/field-slider.tsx lines 36–67

export function FieldSlider() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]
  const [value, setValue] = useState([200, 800])

  return (
    <Field dir={t.dir}>
      <FieldTitle>{t.title}</FieldTitle>
      <FieldDescription>
        {t.description} ({t.currency}
        <span className="font-medium tabular-nums">
          {formatNumber(value[0], t.locale)}
        </span>{" "}
        -{" "}
        <span className="font-medium tabular-nums">
          {formatNumber(value[1], t.locale)}
        </span>
        ).
      </FieldDescription>
      <Slider
        value={value}
        onValueChange={(value) => setValue(value as [number, number])}
        max={1000}
        min={0}
        step={10}
        className="mt-2 w-full"
        aria-label={t.ariaLabel}
      />
    </Field>
  )
}