[BUG] - Slider

[armatrix]

NextUI Version

v2.3.6

Describe the bug

can not get right value while slider marks clicked

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

set small steps for marks, while clicking mark value, slider value not been set right.

Expected behavior

I wanna catch the right value while clicking the 'mark', kindly check the video below

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/62870322/eeac70fa-c6e4-46c5-80c2-50c6528f2001

Operating System Version

macos

Browser

Chrome

[linear[bot]]

ENG-817 [BUG] - Slider

[wingkwong]

I think I fixed a similar issue a while ago. Can you share your code (just the slider part) for me to double check?

[armatrix]

Controller form 'react hook form'

   <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())
                }}
              />
            </>
          )}
        />

[wingkwong]

@armatrix or can you verify using this canary version?

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

[armatrix]

nope, not working, click 20x, the value is still not 20.

@armatrix or can you verify using this canary version?

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

[wingkwong]

ok will take a look

[wingkwong]

preliminary findings

• ~~if the step is decimal~~, clicking the label is not setting the corresponding value if the click is a bit off
• the click logic is from onDownTrack from react aria side
• the value is calculated from percent, i.e. the percent for the target click on the track
• minimal reproducible code

const [value, setValue] = React.useState<SliderValue>(25);

return (
  <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
    <Slider
      className="pb-6"
      classNames={{
        base: "max-w-md",
        label: "text-medium",
      }}
      defaultValue={2}
      label="Leverage"
      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",
        },
      ]}
      maxValue={50}
      minValue={2}
      size="sm"
      step={0.01}
      value={Number(value)}
      onChange={setValue}
    />
    <p className="text-default-500 text-small">Current volume: {value}</p>
  </div>
);