¿Hay algún complemento o ejemplo de un control deslizante jquery que funcione con valores no divisibles de forma no equitativa?

Question

he encontrado dos excelentes plugins jQuery para generar un cursor para un formulario web, que se degradan muy bien en los navegadores que no soporta JavaScript tienen estilos de apagado, etc.

La primera es la versión Jquery.UI: http://ui.jquery.com/demos/slider/#steps

El segundo es un elemento seleccionado para el control deslizante: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

Sin embargo, necesito crear un control deslizante que no solo divida el control deslizante en partes iguales.

Por ejemplo digamos que tengo la siguiente serie de números:

800,1000,1100,1200,1300,1400,1500

Me gustaría que el control deslizante para tener un buen gran brecha entre 800 y 1000 brechas entonces más pequeñas entre 1100-1500

Así que el deslizador se vería un poco como esto:

800 ---- 1000--1100--1200--1300--1400--1500

Preferiblemente me gustaría que se reduzca a un menú desplegable, por lo que la pregunta es si alguien sabe de un complemento que admita esto o tiene alguna recomendación para la mejor manera de lograr esto, personalizar el plugin de filamentgroup, etc.

Actualización: Hackeado con el control deslizante del grupo de filamentos e implementa los controles a través del control deslizante de JQuery UI de todos modos. Por lo tanto, parece que modificar JQuery.UI es la única opción disponible. Buscaré en el código para ver si puedo encontrar el bit requerido que necesita cambiar. Si, mientras tanto, ¡alguien tiene alguna idea!

Answer 1

Usted puede hacerlo usando jQuery deslizador de enganchando en el caso de deslizamiento (anulando efectivamente) ... Algo como esto:

$(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; 
    } 
}); 

debería funcionar para lo que usted describe ... Lo he probado para arrastrar con el mouse & usando las teclas izquierda/derecha/home/end (obviamente, necesitarías cambiar la izquierda/derecha para subir/bajar si quieres un control deslizante vertical).

Algunas notas:

• Obviamente la matriz valores es cualquier paso que desea para sus propósitos.
• También obviamente, el código anterior supone un div con un id de "control deslizante" para funcionar.
• Probablemente funcione de manera extraña si sus valores mínimos/máximos no son los mismos que sus valores mínimos/máximos para el control deslizante (Yo sugeriría simplemente usar "min: values ​​[0], max: values ​​[values.length - 1 ] "como sus opciones mín./máx. en el control deslizante &, entonces siempre debe estar seguro).
• Obviamente esta opción no se degradará a una lista desplegable, pero sería muy fácil de hacer ... simplemente renderice sus elecciones como una lista desplegable normal (el estado predeterminado en caso de que no haya javascript) & luego use jquery para ocultar la lista desplegable y también crear su matriz de valores en función de las opciones. A continuación, puede actualizar la lista desplegable (oculta) al mismo tiempo que actualiza el control deslizante en el código anterior, de modo que cuando su formulario se publique, se seleccionará el valor correcto en la lista desplegable.

Espero que ayude.

Answer 2

En ES6 puede encontrar su número más cercano siguiendo ..

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