FormSliderDemo() — ui Function Reference

Architecture documentation for the FormSliderDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FormSliderDemo() — ui Function Reference

Dependency Diagram

graph TD
  542a8d21_a7e7_2ac9_1523_73f7683d8e90["FormSliderDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  542a8d21_a7e7_2ac9_1523_73f7683d8e90 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 542a8d21_a7e7_2ac9_1523_73f7683d8e90 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 2388–2440

export function FormSliderDemo() {
  const [volume, setVolume] = useState([50])
  const [brightness, setBrightness] = useState([75])

  return (
    <Card>
      <CardHeader>
        <CardTitle>Slider Fields</CardTitle>
        <CardDescription>Different slider field configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="volume-viy">Volume</FieldLabel>
            <Slider
              id="volume-viy"
              value={volume}
              onValueChange={setVolume}
              max={100}
              step={1}
            />
          </Field>
          <Field>
            <FieldLabel htmlFor="brightness-zke">Screen Brightness</FieldLabel>
            <Slider
              id="brightness-zke"
              value={brightness}
              onValueChange={setBrightness}
              max={100}
              step={5}
            />
            <FieldDescription>
              Current brightness: {brightness[0]}%
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="quality-ccr">Video Quality</FieldLabel>
            <FieldDescription>
              Higher quality uses more bandwidth.
            </FieldDescription>
            <Slider
              id="quality-ccr"
              defaultValue={[720]}
              max={1080}
              min={360}
              step={360}
            />
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}