jQuery slider problem reaching min and max values

Question

I have a jQuery slider initialized and then dynamically set min max values depeding on the contents of a json-request. Steps av even 100, min a max are recalculated to even hundred, most of the case somewhere between 300 and 4800.

The slider values and settings are fine, but when I move the handle I can't get it all the way out to the ends, it stops a few steps from min/max values. Why is that?

I've tried all sorts of things, nothing works. I ended up adding 200 at the top value and subtracting 200 in the lower and to compensate, but that's is a hack and not a solution.

Cowled

Is it that the handle has attained the maximum in position, but the reported value isn't at the max (as opposed to the handle not even being able to be brought to the end)? And is it worse when you slide quickly? Just trying to determine if this is the same problem I am experiencing. No solution yet... but will let you know. – Boroughenglish

This question need a minimal reproducible example – Illene

Answer 1

In your 'slide' callback, try using ui.value to get the value. This solved my problem. See jQuery UI slider - can't slide to 0 except don't go by the answer, go by the comment to the answer.

Boroughenglish

Answer 2

I realise this question is 5 years old but I just encountered a similar problem today. I had a short slider with many steps, it went from 0 to 1 with steps of 0.01. The slider handle would bump into the ends of the slider before hitting the outermost steps, so I could only go down to 0.02 and up to 0.98.

If anyone runs into this problem, a quick work-around is to simply make your min and max values go a little further than they should and adjust your value if the user slides past them.

('.slider-container').slider({
                min: -0.02, max: 1.02, step: 0.01, slide: function () {

                    // make values below 0 and over 1 snap back
                    if ($(this).slider('value') < 0) {
                        $(this).slider('value', 0);
                    }

                    if ($(this).slider('value') > 1) {
                        $(this).slider('value', 1);
                    }
});

Ale

Answer 3

I had a similar problem with these settings

min: 35000.74
max: 150000
step: 1 //(default, did not actually change it)

and the slider only went as far as 149999.74. Of course, in my case the problem was that given the step 1 and a range that does not divide evenly into these steps, one of the end values could never be reached with a slider.

Changed the min to be 35000 (Math.floor()) and everything worked like a charm.

Forequarter

Answer 4

This is caused by "step" defaulting to increments too large for your slider. Set "step=0.01" or whatever increment works for your program.

Ciaphus