FieldSlider() — ui Function Reference

Architecture documentation for the FieldSlider() function in preview.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ FieldSlider() — ui Function Reference

Dependency Diagram

graph TD
  a375e8fa_2719_2162_b7d0_a1ee87f494a9["FieldSlider()"]
  7019dfd7_73aa_c7b5_4065_6d3efa35f26a["preview.tsx"]
  a375e8fa_2719_2162_b7d0_a1ee87f494a9 -->|defined in| 7019dfd7_73aa_c7b5_4065_6d3efa35f26a
  style a375e8fa_2719_2162_b7d0_a1ee87f494a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/preview.tsx lines 1513–1538

function FieldSlider() {
  const [value, setValue] = useState([200, 800])
  return (
    <Example title="Field Slider">
      <div className="w-full max-w-md">
        <Field>
          <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={setValue}
            max={1000}
            min={0}
            step={10}
            className="mt-2 w-full"
            aria-label="Price Range"
          />
        </Field>
      </div>
    </Example>
  )
}