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
  967ab799_37fe_b586_297a_dbbc02acf034["FieldSlider()"]
  bb5bdc19_93e7_ec3b_7f84_4e66b48e893d["field-slider.tsx"]
  967ab799_37fe_b586_297a_dbbc02acf034 -->|defined in| bb5bdc19_93e7_ec3b_7f84_4e66b48e893d
  style 967ab799_37fe_b586_297a_dbbc02acf034 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/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>
  )
}