- Resolvido -
Eu sei que eles existem, mas não encontrei um controle deslizante capaz de atender facilmente a algumas necessidades básicas e tenho certeza de que não sou o único frustrado com esse problema. É isso que eu tenho até agora. Estou indo na direção certa?

O que estou tentando fazer:

Usando o controle deslizante JQuery UI, preciso de vários controles deslizantes na página. Cada controle deslizante terá um mínimo de 0, um máximo dinâmico e um valor padrão dinâmico. Defino esses valores em um campo de entrada com os elementos html min, max, value e os recupero posteriormente através de javascript / jquer

Além dos valores máximos individuais, também é necessário um valor máximo total que a soma de todos os controles deslizantes não possa exceder. Por fim, também preciso de disponibilidade para atualizar o controle deslizante da caixa de entrada (assim como o próprio controle deslizante

O que eu tenho até agora:

pós pesquisar vários controles deslizantes, decidi usar o controle deslizante JQuery UI e, finalmente, deparei com esta postagem que me ajudou a alcançar meus objetivos: Total combinado para vários controles deslizantes jQuery-UI

Alterei o código para (1) Use um campo de entrada oculto para recuperar o valor máximo total; (2) preencha um campo de texto de entrada em vez de um intervalo com o valor atual; (3) defina o valor máximo inicial do controle deslizante individual a partir do atributo max =; (4) defina o controle deslizante como desativado: true se o máximo inicial for 0; e (5) escute as alterações na caixa de texto e mova o controle deslizante de acordo com o número digitado, se não exceder o valor máxim

Current Code (JSFiddle): (veja o jsfiddle na resposta)

(Slider # 1 O máximo inicial é 0 - desabilitado // Outros Sliders têm no máximo 500 // o total total da tabela é 1000)

O que o Slider está fazendo certo:

Ajusta-se perfeitamente e permanece abaixo do limite máximo total corretamenteConfigura o máximo individual inicial e o total máximo corretamente corretamente Define e permanece desativado quando o máximo é 0esliza corretamente quando você altera a caixa de text

O que eu preciso de ajuda / Idéias sobre fixação:

A alteração dos controles deslizantes tende a alterar o controle deslizante individual máximo = o total máximoAlterar a caixa de texto desliza a barra atual corretamente, mas não atualiza os outros controles deslizantes para impedir que eles ultrapassem o total máximo de Atualmente, estou usando o evento .focusout () nas caixas de texto porque .change () faz com que ele fique louco porque o controle deslizante também está alterando a caixa de text

Diz-me o que pensas

ATUALIZAR

Fiquei triste por não ouvir nenhuma resposta, mas acho que rachei. Necessário limitar a confiabilidade desse código original e principalmente reescrever. Vou enviar minha solução como resposta abaixo. Experimente e deixe-me saber o que você pensa. Este foi um processo bastante, por isso espero que alguém ache isso útil:)