SliderFields() — ui Function Reference

Architecture documentation for the SliderFields() function in field-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ SliderFields() — ui Function Reference

Dependency Diagram

graph TD
  78905cc4_bf1e_f1c0_81bb_94efed7ca5c1["SliderFields()"]
  0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f["field-example.tsx"]
  78905cc4_bf1e_f1c0_81bb_94efed7ca5c1 -->|defined in| 0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f
  style 78905cc4_bf1e_f1c0_81bb_94efed7ca5c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/field-example.tsx lines 698–816

function SliderFields() {
  const [volume, setVolume] = useState([50])
  const [brightness, setBrightness] = useState([75])
  const [temperature, setTemperature] = useState([0.3, 0.7])
  const [priceRange, setPriceRange] = useState([25, 75])
  const [colorBalance, setColorBalance] = useState([10, 20, 70])

  return (
    <Example title="Slider Fields">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="slider-volume">Volume</FieldLabel>
          <Slider
            id="slider-volume"
            value={volume}
            onValueChange={setVolume}
            max={100}
            step={1}
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="slider-brightness">Screen Brightness</FieldLabel>
          <Slider
            id="slider-brightness"
            value={brightness}
            onValueChange={setBrightness}
            max={100}
            step={5}
          />
          <FieldDescription>
            Current brightness: {brightness[0]}%
          </FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="slider-quality">Video Quality</FieldLabel>
          <FieldDescription>
            Higher quality uses more bandwidth.
          </FieldDescription>
          <Slider
            id="slider-quality"
            defaultValue={[720]}
            max={1080}
            min={360}
            step={360}
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="slider-temperature">
            Temperature Range
          </FieldLabel>
          <Slider
            id="slider-temperature"
            value={temperature}
            onValueChange={setTemperature}
            min={0}
            max={1}
            step={0.1}
          />
          <FieldDescription>
            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}
          </FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="slider-price-range">Price Range</FieldLabel>
          <Slider
            id="slider-price-range"
            value={priceRange}
            onValueChange={setPriceRange}
            max={100}
            step={5}
          />
          <FieldDescription>
            ${priceRange[0]} - ${priceRange[1]}
          </FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="slider-color-balance">Color Balance</FieldLabel>
          <Slider
            id="slider-color-balance"
            value={colorBalance}
            onValueChange={setColorBalance}