FieldSlider() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FieldSlider() — ui Function Reference

Dependency Diagram

graph TD
  e0f618ae_e1df_2d18_ed39_e5971268acb1["FieldSlider()"]
  e761e1c8_d84d_6d02_47bc_0b1f5c8a77cd["field-slider.tsx"]
  e0f618ae_e1df_2d18_ed39_e5971268acb1 -->|defined in| e761e1c8_d84d_6d02_47bc_0b1f5c8a77cd
  style e0f618ae_e1df_2d18_ed39_e5971268acb1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/field-slider.tsx lines 7–29

export default function FieldSlider() {
  const [value, setValue] = React.useState([200, 800])

  return (
    <Field className="w-full max-w-xs">
      <FieldTitle>Price Range</FieldTitle>
      <FieldDescription>
        Set your budget range ($
        <span className="font-medium tabular-nums">{value[0]}</span> -{" "}
        <span className="font-medium tabular-nums">{value[1]}</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="Price Range"
      />
    </Field>
  )
}