Значение jquery UI Slider в зависимости от активного переключателя

У меня есть ползунок jQuery UI, который идет от 0 до 200 с шагом 10. Значение ползунка отображается в поле. Пока что так просто.

Теперь у меня есть 3 переключателя рядом со своим слайдером с надписью "full", "half" и "quarter". По умолчанию выбрана кнопка "Полный".

Я хочу, чтобы значение, отображаемое слайдером, учитывало выбранное значение переключателя, так что, когда выбран "полный", ползунок в позиции 80 отображает 80, но когда активна кнопка "половина", слайдер в то же время позиция должна приводить к значению 40 в выходном тексте. и т.п.

Выход значения должен обновляться не только при перемещении ползунка, но и при изменении состояния переключателя.

К сожалению, я еще не понял, как использовать активное значение переключателя внутри вычисления значения ползунка. Я также не знаю, как вызвать пересчет при изменении переключателя. Может ли кто-нибудь помочь?

РЕДАКТИРОВАТЬ: В соответствии с просьбой, вот какой маленький код у меня есть

Это в основном только пример с сайта пользовательского интерфейса jQuery.

Html:

<div>
 <form>
  1 Processor
  2 Processors
  4 Processors
 </form>
</div>

<div>
 Time needed: 
</div>

Я упростил этот пример. На реальном сайте будут представлены различные модели лазерных/плазменных резцов, которые перечислены в базовой модели с временным коэффициентом 1 и более быстрыми с значениями до 6,3

Редактировать # 2: мне удалось заставить ползунок влиять на значение активного переключателя следующим образом:

Я не понял, как напрямую изменять выходное значение при изменении переключателя. Сейчас он пересчитывает значение только при перемещении ползунка.

2 ответа

Попробуйте следующее: http://jsfiddle.net/lotusgodkk/GCu2D/351/

var slider;
$(document).ready(function () {
 slider = $('.checked').slider({
 max: 200,
 min: 0,
 step: 10,
 value: 200,
 slide: function (event, ui) {
 $('.i[value="' + ui.value + '"]:first').attr('checked', true).change();
 }
 });
 $('.i').change(function () {
 var checked = $('.i:checked').val();
 slider.slider('value', checked);
 });
});

HTML:

Full
Half
Quarter


Это делает трюк. Первый скрипт предназначен для перемещения слайдера, второй - для изменения значения, если переключатель изменяется.

licensed under cc by-sa 3.0 with attribution.