Min = max

[mgibbs189]

I know this is an edge case - I'm using noUiSlider as a filter on a product listing (think Amazon). The [min] and [max] are based dynamically on the result set.

When the result set is filtered to a single item, [min] and [max] are the same, and the slider behaves oddly (it's supposed to be a 2-handle slider):

There's some error handling I could add on my side, but I'm wondering if it's worth building this edge-case into noUiSlider itself? E.g. something like

[Keeo]

I stumbled upon similar problem with one-handle slider.
Similar use case - dynamically altering max value and in some cases its equal to min. The unnatural thing is that handle will be on right side of slider instead on left side.
https://www.youtube.com/watch?v=J3kwx1I4KUQ
sorry for video but making gif is really annoymance

[leongersen]

Ok, but how do you propose this should be handled? A range of 0 doesn't provide a lot of use for your user, wouldn't you agree?

[Keeo]

Do we all agree that right position of handle is wrong?
These are solutions i can think of:

• remove handles. Suprisingly clean solution, when there is nothing to be set there is no need for handle
• place handle to the left. Its okey solution but when min != 0 its not really intuitive

[leongersen]

We agree, in the sense that right and left are equally wrong. Removing handles seems unexpected.

How about centering?

Closing was accidental...

[Keeo]

Middle position looks nice and doesn't look bare or nude like version without handle. Though class to distinguish between active and disable handles would be required.

[mpavel]

I'm encountering some problems with a larger filter. The slider is connected to other values in this filter, and dynamically sets min and max. Sometimes min and max are set to 0, and when I try moving the sliders, I get a NaN.

I think the best solution would be to remove the handles. When you don't have any values to choose from, why show a handle? The input itself could also be set to a "disabled" state and an appropriate mouse cursor on hover.

[leongersen]

Code to implement this got very messy, so I decided not to include it in the new release. I'd recommend validating the slider range before setting it.

[timo002]

Besides this, If you have linked inputs to the min and max value, you get a NaN in the input fields when the min and max are the same. See screenshot below:
http://i.imgur.com/DKIfScs.png
How to fix the NaN and just show the min / max price.

[no-gravity]

I have this problem too. The NaN-NaN in the input fields is definitely a bug, can we agree on this?

As for slider positions when min=max I would find it most natural to have the min slider sits on the left and the max slider sits on the right.

[leongersen]

is definitely a bug

Yes, but: no. I'm considering setting min and max to the same value a serious UI bug, as no user is going to understand what an unmovable slider means. 'Resolving' this issue by throwing an error on min = max would be an option, but the amount of response here seems to indicate something else is required. What other user-friendly options can we come up with?

[no-gravity]

I have to say that I only encountered this with test data, so it is a low priority issue for me. I love how elegant no ui slider is. That's why I'm inclined to join this discussion in the hope that it helps on the way to perfection :)

I strongly feel that raising an error would be a bad idea. And that handling min=max just like any other combination of values is the right approach.

Imagine the following: A user selects "Show me all animals in Africa that weight more then 5kg and live on trees". Then the filters on the animal page might look like this:

Live span in years: 3 - 15
Nr of legs: 4 - 4
Run speed in km/h: 3 - 22

So he immediately sees that heavy tree animals in Africa all have 4 legs. That's exactly what he expects. Any change in the UI would be confusing. Let alone getting an error.

[leongersen]

Sounds fair. I might argue it could be better to show all animals in the current selection have N legs, but that has obviously nothing to do with noUiSlider. I'm also fairly sure that for two-handle sliders min=max should put both handles on the same position.

[jmulans]

Hello, I have the same NaN problem.
will this bug be fixed ?

[jmulans]

My min and max values are dynamic, so for the moment, my solution is :

if (min == max) {
    minRange -= 60; // minus 1 minute
    maxRange += 60; // plus 1 minute
    step = 60; // 1 minute step
}
$('#slider').noUiSlider({
    start: [min, max],
    step: step,
    range: {
        'min': minRange,
        'max': maxRange
    }
}, true);
if (min == max) {
    $slider.attr('disabled',' disabled');
}

So the spots will be on the middle of the slider, disabled

[kiaplayer]

@jmoulin-vp, thanks man! It works.

[isWill]

min and max cannot be equal why?

[leongersen]

noUiSlider 15.4.0 adds support for sliders with ranges where min = max. In this case, handles are spaced evenly across the slider.

Thank you for your feedback, everybody!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.