jquery UI Значок слайдера в зависимости от активной кнопки

Question

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

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

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

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

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

EDIT: В соответствии с просьбой вот то немногое, что код у меня есть

<script> 
    $(function() { 
     $("#slider").slider({ 
      value: 42, 
      min: 0, 
      max: 200, 
      step: 10, 
      slide: function (event, ui) { 
       $("#amount").val("$" + ui.value); 
      } 
     }); 
     $("#amount").val("$" + $("#slider").slider("value")); 
    }); 
</script> 

Это в основном только пример с веб-сайта JQuery UI.

HTML, является:

<div> 
    <form> 
     <input type="radio" name="factor" value="1"> 1 Processor<br> 
     <input type="radio" name="factor" value="2"> 2 Processors<br> 
     <input type="radio" name="factor" value="4"> 4 Processors 
    </form> 
</div> 
<div id="slider"></div> 
<div> 
    Time needed: <input type="text" id="amount" readonly> 
</div> 

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

Редактировать # 2: Мне удалось получить слайдер для значение кнопки активного радио, как это:

<script> 
    $(function() { 
     $("#slider").slider({ 
      value: 40, 
      min: 0, 
      max: 200, 
      step: 10, 
      slide: function (event, ui) { 
       var divisor = $('input:radio[name=factor]:checked').val(); 
       $("#amount").val(ui.value/divisor + " minutes"); 
      } 
     }); 
     var divisor = $('input:radio[name=factor]:checked').val(); 
     $("#amount").val(($("#slider").slider("value"))/divisor + " minutes"); 
    }); 
</script> 

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

Answer 1

Попробуйте это: 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:

<div class="checked"></div>Full 
<input type="radio" value="200" class="i" checked="true" name="a" />Half 
<input type="radio" value="100" class="i" name="a" />Quarter 
<input type="radio" value="50" class="i" name="a" /> 

Answer 2

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

<script> 
    $(function() { 
     $("#slider").slider({ 
      value: 40, 
      min: 0, 
      max: 200, 
      step: 10, 
      slide: function (event, ui) { 
       var divisor = $('input:radio[name=factor]:checked').val(); 
       $("#amount").val(ui.value/divisor + " minutes"); 
      } 
     }); 
     var divisor = $('input:radio[name=factor]:checked').val(); 
     $("#amount").val(($("#slider").slider("value"))/divisor + " minutes"); 
    }); 
</script> 

<script> 
    $(document).ready(function() { 
     $('input[type=radio][name=factor]').change(function() { 
      var divisor = $('input:radio[name=factor]:checked').val(); 
      $("#amount").val(($("#slider").slider("value"))/divisor + " minutes"); 
     }); 
    }); 
</script>