Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider: Warning NaN for the bottom css style property #4686

Closed
kyybo opened this issue Jul 26, 2023 · 1 comment · Fixed by #4688
Closed

Slider: Warning NaN for the bottom css style property #4686

kyybo opened this issue Jul 26, 2023 · 1 comment · Fixed by #4688
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@kyybo
Copy link
Contributor

kyybo commented Jul 26, 2023

Describe the bug

Hello,
I've noticed a small difference between vertical and horizontal Sliders:
When I create a vertical Slider with a 'min' property identical to the 'max' property, I get the following error in the console: "Warning: 'NaN' is an invalid value for the 'bottom' css style property."
But with a horizontal Slider, this error doesn't appear, whereas you'd expect something like "Warning: 'NaN' is an invalid value for the 'left' css style property."

It seems to me that the error appears because a division by (max-min) is made at some point.
The behavior should be homogeneous in the 2 cases (vertical and horizontal).
Personally, I'd prefer there to be no error in either case.

PS : Having a 'min' equal to the 'max' may seem strange.
In my case, I use the Slider to modify the depth of a graph, and the Slider's 'max' property is calculated according to the maximum depth of my graph. However, it is possible to have graphs with a single node. In this case, min = max

Reproducer

No response

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

<Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" min={1} max={1} orientation="vertical"/> --> Error in console

<Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" min={1} max={1} orientation="horizontal"/> --> No error in console

Expected behavior

No response

@kyybo kyybo added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 26, 2023
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jul 26, 2023
melloware added a commit to melloware/primereact that referenced this issue Jul 26, 2023
@melloware melloware self-assigned this Jul 26, 2023
@melloware melloware added this to the 9.6.1 milestone Jul 26, 2023
@melloware
Copy link
Member

Thanks for the report PR submitted!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants