Is there a plugin or example of a jquery slider working with non-equably divisible values?

Question

I have found two excellent jquery plugins for generating a slider for a web form, which degrade nicely in browsers that do not support javascript have styles turned off etc.

Answer 1

In Es6 you can find your closest number by following ..

function findClosest(array, value) {
  return array.sort( (a, b) => Math.abs(value - a) - Math.abs(value - b) )[0];
}

let array = [1, 5, 10, 28, 21];
let v = 4;
let number = findClosest(array, v); // -> 5 

Answer 2

You could do it using jquery's slider by hooking into the slide event (effectively overriding it)... Something like this:

$(function() {
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100];
    var slider = $("#slider").slider({
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.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;
    }
});

Should work for what you describe... I've tested it for dragging with the mouse & using left/right/home/end keys (obviously you'd need to change the left/right to up/down if you want a vertical slider).

Some notes:

• Obviously the values array is whatever steps you want for your purposes.
• Also obviously, the above code assumes a div with an id of "slider" to work.
• It will probably work strangely if your min/max values are not the same as your min/max values for the slider (I would suggest just using "min: values[0], max: values[values.length - 1]" as your min/max options on the slider & then you should always be safe).
• Obviously this option won't currently degrade to a drop down list, but it would be very easy to do... simply render your choices as a normal drop down list (the default state incase of no javascript) & then use jquery to hide the drop down list and also create your values array based on the options. Then you could just update the (hidden) drop down list at the same time as you update the slider in the code above, so that when your form posts, the correct value will be selected in the drop down list.

Hope that helps.