<Controller
          name="leverage"
          control={control}
          defaultValue={"2"}
          render={({ field: { onChange, value } }) => (
            <>
              <Slider
                label="Leverage"
                size="sm"
                step={0.01}
                maxValue={50}
                minValue={2}
                defaultValue={2}
                className="pb-6"
                marks={[
                  {
                    value: 2,
                    label: "2x",
                  },
                  {
                    value: 10,
                    label: "10x",
                  },
                  {
                    value: 20,
                    label: "20x",
                  },
                  {
                    value: 30,
                    label: "30x",
                  },
                  {
                    value: 40,
                    label: "40x",
                  },
                  {
                    value: 50,
                    label: "50x",
                  },
                ]}
                classNames={{
                  base: "max-w-md",
                  label: "text-medium",
                }}
                renderValue={({ children, ...props }) => (
                  <output {...props}>
                    <Tooltip
                      className="text-tiny text-default-500 rounded-md"
                      content="Press Enter to confirm"
                      placement="left"
                    >
                      <Input
                        className="px-1 py-0.5 w-24 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
                        type="number"
                        value={value}
                        onChange={(e) => {
                          onChange(e.target.value)
                          onChangeLeverage(e.target.value)
                        }}
                        isInvalid={!!errors.leverage}
                        onBlur={() => trigger("leverage")}
                        onKeyDown={(
                          e: React.KeyboardEvent<HTMLInputElement>
                        ) => {
                          if (e.key === "Enter" && !isNaN(Number(value))) {
                            onChange(value)
                            onChangeLeverage(value)
                          }
                        }}
                        endContent={<span>x</span>}
                      />
                    </Tooltip>
                  </output>
                )}
                value={Number(value)}
                onChange={(newValue) => {
                  setValue("leverage", newValue.toString())
                  onChangeLeverage(newValue.toString())
                }}
              />
            </>
          )}
        />

"@nextui-org/slider": "0.0.0-canary-20240504162810"