jQuery UI Slider - max value (not end of slider)

Question

I have a stepped slider, with non-linear steps -

code:

$(function() {
    var trueValues = [5, 10, 20, 50, 100, 150];
    var values =     [10, 20, 30, 40, 60, 100];
    var slider = $("#parkSlider").slider({
        orientation: 'horizontal',
        range: "min",
    value: 40,
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            var value = findNearest(includeLeft, includeRight, ui.value);
            slider.slider('value', value);
        $("#amount").val(getRealValue(value)); 
            return false;
        },

    });
    function findNearest(includeLeft, includeRight, value) {
        var nearest = null;
        var diff = null;
        for (var i = 0; i < values.length; i++) {
            if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
                var newDiff = Math.abs(value - values[i]);
                if (diff == null || newDiff < diff) {
                    nearest = values[i];
                    diff = newDiff;
                }
            }
        }
        return nearest;
    }
    function getRealValue(sliderValue) {
        for (var i = 0; i < values.length; i++) {
            if (values[i] >= sliderValue) {
                return trueValues[i];
            }
        }
        return 0;
    }

Here's my slider graphic:

I have the minimum value set to be at the 5 in the graphic, but I am trying to set the max (value & position) to stop at the 150 in the graphic. No matter what I've tried, the slider goes to the full end of the slider, and I always want it to stop short at the 150.

Any ideas?

Calciferol

Answer 1

The problem lies with your values and trueValues arrays and how you're handling them in the getRealValue() function. You're overriding the slider defaults with the trueValues array.

I'm a little unclear as to why you want both values and trueValues. My interpretation of your code is that trueValues is what the slider's default values settings are, and values are some sort of user-defined values.

What you want to do is .concat() values and trueValues into a single array and use that new array for the slider values. You should keep range: 'min' and perhaps set max: 160 and min: -5 to make the slider render nicely.

Here's a working jsFiddle.

Hispanicize

'values[values.length - 1]' was removed from my question (I added that in, when I was adding in extra values to try and set the max at the position -1. My range is a fixed range for styling purposes only (the color change) – Calciferol

So what I am trying to do, is have a max incremental value (not the actual max value of the slider. Setting the max is easy, but I need the slider handle to stop short of the end of slider at stop at the 150 mark... – Calciferol

@Calciferol If you read both the linked and copied documentation, it will stop short at the 150 mark if you specify range: true. – Hispanicize

but you can see that I only have one handle - not two. Having the range set at true, also messes with the rest of the functionality (in that it doesn't slide, as I'm setting the increments non-linear) - Also, you need to read the rest of the question - I am able to set the max value, but I need to set a max position of the slider handle at the 150 mark - I downvoted due to you not reading the full extent of the question. – Calciferol

You want to set range: max, in that case. – Hispanicize

right, but that also sets the very end of the slider as the 150 value. I need to set it to be offset from the end as evidenced by my graphic – Calciferol

It would help immensely if you could post a jsFiddle of this with your CSS. Right now I'm playing with a jsFiddle and it's difficult to reproduce. – Hispanicize

I will get that done later, I meant to do it this AM, but ran out of time – Calciferol

@Calciferol I think I've figured out what you want, so I'm updating my answer accordingly. Let me know if this still completely off. – Hispanicize

AH ha! a perfect simple answer. I didn't think to set the max value a hair higher than what I wanted the final value to be. Thanks for that. On a sidenote, the reason I have the values & true values is so that I can set the increments non-linear (meaning unequal step sizes), but I still want to return the values from trueValues. – Calciferol