Enode — API Reference
    Preparing search index...

    Function ZoneSplitDial

    • The radial twin of import("./zone-split-slider").ZoneSplitSlider: two handles on a ring split the turn into three abutting zone arcs whose fractions always sum to 1. Controlled — the caller owns the values and receives the new split on every drag or keypress.

      The ring wraps children (an icon, a value), which is what makes it worth having alongside the linear control: the thing being adjusted sits inside its own gauge instead of beside it.

      Geometry runs clockwise from 12 o'clock. The three arcs are separated by three gaps: the one at 12 o'clock is fixed (it is where the turn starts and ends), and the other two ARE the controls: hovering the ring raises a handle out of the nearer one. The handles cannot cross, so no zone goes negative; zone2 is derived (1 − zone0 − zone1) but stays in the prop shape for symmetry with the linear slider.

      Parameters

      • onChange: {
            ariaLabel?: string;
            children?: ReactNode;
            className?: string;
            disabled?: boolean;
            lineWidth?: number;
            onChange: (zones: ZoneSplit) => void;
            size?: number;
            zone0: number;
            zone1: number;
            zone2: number;
        }

        receives the new { zone0, zone1, zone2 }, already summing to 1.

        • OptionalariaLabel?: string
        • Optionalchildren?: ReactNode

          Rendered centred inside the ring — the muscle icon.

        • OptionalclassName?: string
        • Optionaldisabled?: boolean
        • OptionallineWidth?: number

          Ring thickness, in px.

        • onChange: (zones: ZoneSplit) => void
        • Optionalsize?: number

          Outer diameter of the ring, in px.

        • zone0: number
        • zone1: number
        • zone2: number

      Returns Element

    Settings

    Member Visibility