Fluentui: Slider misbehaves when min equals max

[SumiranAgg]

Bug Report

• __Package version(s)__: (fill this out)
• __Browser and OS versions__: (fill this out if relevant)

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)- Yes

Requested priority: (Blocking, High, Normal, Low) - Normal

Products/sites affected: (if applicable) - Vsts

Describe the issue:

We are using slider where our max is a dynamic value and min is set to 1. The issue occurs when max = 1 as well. The slider bar becomes invisible.

Actual behavior:

The slider bar becomes invisible.

Expected behavior:

The slider handle should stay at extreme left and movement should not be allowed

[betrue-final-final]

I think I understand this, but let me restate to make sure.
When you say "max", do you mean the number of points drawn? Would that be separate from the actual length of the slider? I would expect so, in which case yes you are correct with this bug.

[micahgodbolt]

Makes sense to me. Even if there are no other values to slide to, it should still look like the slider. I'm curious if design might have a specific design in mind for this scenario. How do we indicate to the user that there are no other values to slide to? Should the slider and number be in the middle with no min/max values?

[betrue-final-final]

Those are very good questions. In essence, a slider with just one point is actually disabled, so I would expect that to be the design at this point.

[micahgodbolt]

@betrue-final-final if you can give us a quick visual of how this should look, i feel it'd be a good candidate for our shield devs

[betrue-final-final]

So I would expect it to look like the top one. However, is there any way we can just prevent this from happening? It's kinda useless.

[micahgodbolt]

in a situation with a variable slider range, its certainly a feasible scenario. I'm happy to support it.

[micahgodbolt]

restricting max to be min +1 means that in that top example you'd still have min 1, max 2, but you wouldn't be able to move the slider to 2.....so that '2' is a bit misleading and probably doesn't represent what the slider is actually trying to represent.

[betrue-final-final]

There is no 2. The number is 1, and the track is "disabled" showing that you can't move it. What are you looking at?

[SumiranAgg]

@micahgodbolt Please review the PR attached as a candidate fix.
Also IMO the first slider in image shared by @betrue-final-final would be ideal in this case.

[micahgodbolt]

@betrue-final-final sorry, I wasn't very clear. You asked about simply preventing this from happening (not allowing min to equal max) but I feel that it is necessary.

[msft-github-bot]

:tada:This issue was addressed in #6640, which has now been successfully released as [email protected].:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site