- Resuelto -
Sé que existen, pero no he encontrado un control deslizante que pueda satisfacer fácilmente algunas necesidades muy básicas y estoy seguro de que no soy el único frustrado con este problema. Esto es lo que tengo hasta ahora. ¿Me dirijo en la dirección correcta?

Lo que estoy tratando de hacer:

Utilizando el control deslizante JQuery UI, necesito varios controles deslizantes en la página. Cada control deslizante tendrá un mínimo de 0, un máximo dinámico y un valor predeterminado dinámico. Establezco estos valores en un campo de entrada con los elementos html min, max, value y los recupero más tarde a través de javascript / jquery.

Además de sus valores máximos individuales, también debe existir un valor máximo total que la suma de todos los controles deslizantes no pueda exceder. Finalmente, también necesito disponibilidad para actualizar el control deslizante desde el cuadro de entrada (así como el control deslizante mismo).

Lo que tengo hasta ahora:

Después de investigar una serie de controles deslizantes, decidí usar el control deslizante JQuery UI y finalmente encontré esta publicación que me ayudó a alcanzar mis objetivos: Total combinado para múltiples deslizadores jQuery-UI

Modifiqué el código para (1) Usar un campo de entrada oculto para recuperar el valor máximo total; (2) rellene un campo de texto de entrada en lugar de un intervalo con el valor actual; (3) establezca el valor máximo inicial del control deslizante individual desde el atributo max =; (4) establezca el control deslizante en deshabilitado: verdadero si el máximo inicial es 0; y (5) escuche los cambios en el cuadro de texto y mueva el control deslizante según el número ingresado si no excederá el valor máximo.

Código actual (JSFiddle): (ver el jsfiddle en respuesta)

(Control deslizante n. ° 1 El máximo inicial es 0: deshabilitado // Otros controles deslizantes tienen un máximo de 500 // el máximo total de la tabla es 1000)

Lo que el control deslizante está haciendo bien:

Se ajusta bien y se mantiene por debajo del límite máximo total correctamente Establece el máximo individual inicial y el máximo total correctamente Establece y permanece deshabilitado cuando el máximo es 0 Se desliza correctamente cuando cambia el cuadro de texto

Lo que necesito Ayuda / Ideas sobre la fijación:

Cambiar los controles deslizantes tiende a cambiar el control deslizante individual max = el total máximoCambiar el cuadro de texto desliza la barra actual correctamente, pero no actualiza los otros controles deslizantes para evitar que superen el máximo total Actualmente estoy usando el evento .focusout () en los cuadros de texto porque .change () hace que se vuelva loco porque el control deslizante también está cambiando el cuadro de texto.

Déjame saber lo que piensas

ACTUALIZAR

Me entristeció no escuchar ninguna respuesta, pero creo que lo descifré. Necesario para limitar la confiabilidad en ese código original y principalmente reescribir. Presentaré mi solución como respuesta a continuación. Por favor, pruébalo y déjame saber lo que piensas. Este fue un gran proceso, así que espero que alguien encuentre esto útil:)