- Решено -
Я знаю, что они существуют, но я не нашел слайдера, который мог бы легко удовлетворить некоторые самые базовые потребности, и я уверен, что я не единственный, кто разочарован этой проблемой. Это то, что я до сих пор. Я иду в правильном направлении?

Что я пытаюсь сделать:

Используя слайдер JQuery UI, мне нужно несколько ползунков на странице. У каждого ползунка будет минимум 0, динамический максимум и динамическое значение по умолчанию. Я устанавливаю эти значения в поле ввода с html-элементами min, max, value и получаю их позже через javascript / jquery.

В дополнение к их отдельным максимальным значениям также должно быть общее максимальное значение, которое сумма всех ползунков не может превышать. Наконец, мне также нужна доступность для обновления слайдера из поля ввода (а также самого слайдера).

Что у меня так далеко:

Изучив несколько слайдеров, я остановился на использовании слайдера пользовательского интерфейса JQuery и в конце концов наткнулся на этот пост, с которого я начал достигать своих целей:Общее количество для нескольких слайдеров jQuery-UI

Я изменил код на (1) использовать скрытое поле ввода, чтобы получить общее максимальное значение; (2) заполнить поле ввода текста вместо диапазона текущим значением; (3) установить начальное максимальное значение отдельного слайдера из атрибута max =; (4) установите слайдер в отключенное состояние: true, если начальный максимум равен 0; и (5) прослушать изменения в текстовом поле и переместить ползунок в соответствии с введенным числом, если оно не будет превышать максимальное значение.

Текущий код (JSFiddle): (см. ответ jsfiddle)

(Ползунок # 1 Начальный максимум равен 0 - отключен // Другие ползунки имеют максимум 500 // Общая таблица не более 1000)

Что делает слайдер правильно:

Он корректно регулируется и остается под общим максимальным пределом правильноУстанавливает начальный индивидуальный максимум и общий максимум правильноУстанавливает и остается отключенным, когда максимум равен 0Правильно скользит при изменении текстового поля

Что мне нужно Помощь / Идеи по ремонту:

Изменение ползунков приводит к изменению максимального значения отдельного ползунка = общего максимума.Изменение текстового поля правильно перемещает текущую панель, но не обновляет другие ползунки, чтобы они не превышали общий максимумВ настоящее время я использую событие .focusout () в текстовых полях, потому что .change () заставляет его сходить с ума, потому что слайдер также меняет текстовое поле.

Дайте мне знать, что вы думаете.

ОБНОВИТЬ:

Мне было грустно не слышать никаких ответов, но я думаю, что взломал это. Необходимо ограничить надежность исходного кода и переписать его. Я отправлю свое решение как ответ ниже. Пожалуйста, попробуйте и дайте мне знать, что вы думаете. Это был довольно сложный процесс, поэтому, надеюсь, кто-то найдет это полезным