import { ControlHandle } from './ControlHandle.jsx';

// figma node: 9036:13202 Slider (30 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "label=" + __venc(p.label) + '|' + "rightControl=" + __venc(p.rightControl) + '|' + "leftControl=" + __venc(p.leftControl);

export function Slider(_p = {}) {
  const props = { ..._p, label: _p.label ?? "false", rightControl: _p.rightControl ?? "25%", leftControl: _p.leftControl ?? "0%" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"25%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"25%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 148,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"50%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 148,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"50%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"25%"} state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"50%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"25%"} state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"50%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body6 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 240,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 240,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body7 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 240,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 240,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 228,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"75%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body8 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"25%"} state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 148,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"75%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body9 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"25%"} state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 148,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"75%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body10 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 160,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"50%"} state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"75%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body11 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 160,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"50%"} state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"75%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body12 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 320,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 296,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body13 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 320,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 296,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body14 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 240,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 240,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"25%"} state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 216,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body15 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 240,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 240,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"25%"} state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 216,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body16 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 160,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"50%"} state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 136,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body17 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 160,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"50%"} state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 136,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body18 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 56,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 240,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"75%"} state={"default"} type={"text"} />}</div>
        <div style={{
            position: "absolute",
            left: 56,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"text"} />}</div>
      </div>
    </div>
  );
  const __body19 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 240,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle text1={"75%"} state={"default"} type={"tooltip"} />}</div>
        <div style={{
            position: "absolute",
            left: 56,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle text1={"100%"} state={"default"} type={"tooltip"} />}</div>
      </div>
    </div>
  );
  const __body20 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body21 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 148,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body22 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body23 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 240,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 240,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 228,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body24 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 148,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body25 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 160,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 68,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body26 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 320,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: 0,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 296,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body27 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 80,
        top: 8,
        width: 240,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 240,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 216,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body28 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 160,
        top: 8,
        width: 160,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 160,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 136,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __body29 = () => (
    <div className={props.className} style={{
      width: 320,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 8,
        width: 320,
        height: 8,
        borderRadius: 9999,
        backgroundColor: "var(--colors-background-bg-quaternary)",
      }} />
      <div style={{
        position: "absolute",
        left: 248,
        top: 8,
        width: 80,
        height: 8,
      }}>
        <div style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: 80,
          height: 8,
          borderRadius: 9999,
          backgroundColor: "var(--colors-foreground-fg-brand-primary-600)",
        }} />
        <div style={{
            position: "absolute",
            left: -12,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon1 ?? <ControlHandle state={"default"} type={"false"} />}</div>
        <div style={{
            position: "absolute",
            left: 56,
            top: -8,
            width: 24,
            height: 24,
          }}>{props.icon2 ?? <ControlHandle state={"default"} type={"false"} />}</div>
      </div>
    </div>
  );
  const __impls = {
    // figma: Label=Bottom, Right control=25%, Left control=0%
    "label=bottom|rightControl=25%25|leftControl=0%25": __body0,
    // figma: Label=Top floating, Right control=25%, Left control=0%
    "label=top floating|rightControl=25%25|leftControl=0%25": __body1,
    // figma: Label=Bottom, Right control=50%, Left control=0%
    "label=bottom|rightControl=50%25|leftControl=0%25": __body2,
    // figma: Label=Top floating, Right control=50%, Left control=0%
    "label=top floating|rightControl=50%25|leftControl=0%25": __body3,
    // figma: Label=Bottom, Right control=50%, Left control=25%
    "label=bottom|rightControl=50%25|leftControl=25%25": __body4,
    // figma: Label=Top floating, Right control=50%, Left control=25%
    "label=top floating|rightControl=50%25|leftControl=25%25": __body5,
    // figma: Label=Bottom, Right control=75%, Left control=New value
    "label=bottom|rightControl=75%25|leftControl=new value": __body6,
    // figma: Label=Top floating, Right control=75%, Left control=0%
    "label=top floating|rightControl=75%25|leftControl=0%25": __body7,
    // figma: Label=Bottom, Right control=75%, Left control=25%
    "label=bottom|rightControl=75%25|leftControl=25%25": __body8,
    // figma: Label=Top floating, Right control=75%, Left control=25%
    "label=top floating|rightControl=75%25|leftControl=25%25": __body9,
    // figma: Label=Bottom, Right control=75%, Left control=50%
    "label=bottom|rightControl=75%25|leftControl=50%25": __body10,
    // figma: Label=Top floating, Right control=75%, Left control=50%
    "label=top floating|rightControl=75%25|leftControl=50%25": __body11,
    // figma: Label=Bottom, Right control=100%, Left control=0%
    "label=bottom|rightControl=100%25|leftControl=0%25": __body12,
    // figma: Label=Top floating, Right control=100%, Left control=0%
    "label=top floating|rightControl=100%25|leftControl=0%25": __body13,
    // figma: Label=Bottom, Right control=100%, Left control=25%
    "label=bottom|rightControl=100%25|leftControl=25%25": __body14,
    // figma: Label=Top floating, Right control=100%, Left control=25%
    "label=top floating|rightControl=100%25|leftControl=25%25": __body15,
    // figma: Label=Bottom, Right control=100%, Left control=50%
    "label=bottom|rightControl=100%25|leftControl=50%25": __body16,
    // figma: Label=Top floating, Right control=100%, Left control=50%
    "label=top floating|rightControl=100%25|leftControl=50%25": __body17,
    // figma: Label=Bottom, Right control=100%, Left control=75%
    "label=bottom|rightControl=100%25|leftControl=75%25": __body18,
    // figma: Label=Top floating, Right control=100%, Left control=75%
    "label=top floating|rightControl=100%25|leftControl=75%25": __body19,
    // figma: Label=False, Right control=25%, Left control=0%
    "label=false|rightControl=25%25|leftControl=0%25": __body20,
    // figma: Label=False, Right control=50%, Left control=0%
    "label=false|rightControl=50%25|leftControl=0%25": __body21,
    // figma: Label=False, Right control=50%, Left control=25%
    "label=false|rightControl=50%25|leftControl=25%25": __body22,
    // figma: Label=False, Right control=75%, Left control=0%
    "label=false|rightControl=75%25|leftControl=0%25": __body23,
    // figma: Label=False, Right control=75%, Left control=25%
    "label=false|rightControl=75%25|leftControl=25%25": __body24,
    // figma: Label=False, Right control=75%, Left control=50%
    "label=false|rightControl=75%25|leftControl=50%25": __body25,
    // figma: Label=False, Right control=100%, Left control=0%
    "label=false|rightControl=100%25|leftControl=0%25": __body26,
    // figma: Label=False, Right control=100%, Left control=25%
    "label=false|rightControl=100%25|leftControl=25%25": __body27,
    // figma: Label=False, Right control=100%, Left control=50%
    "label=false|rightControl=100%25|leftControl=50%25": __body28,
    // figma: Label=False, Right control=100%, Left control=75%
    "label=false|rightControl=100%25|leftControl=75%25": __body29,
  };
  return (__impls[__vkey(props)] ?? __body20)();
}
export default Slider;
