Использование JQuery UI для преобразования переключателей в элементы слайдера

Question

У меня есть форма, отображаемая с помощью переключателей, например:

<h2>How long is your hair?</h2>
<input type="radio" name="71" value="98">Short 
<input type="radio" name="71" value="99">Medium 
<input type="radio" name="71" value="100">Long 

Примерно 15 таких вопросов, и я хотел бы, чтобы вся форма отображалась с помощью ползунков с использованием JQuery (JqueryПользовательский интерфейс кажется наиболее вероятным кандидатом).

Я нашел несколько плагинов для преобразования полей выбора в ползунки (например, selectToUISlider ), но ни один для переключателей.

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

Answer 1

Вот базовая структура одного варианта, я не уверен, насколько ваши вопросы различаются (у всех есть 3 варианта?), Поэтому стиль будет отличаться, просто пытаясь продемонстрировать концепцию.

Я не уверен, что содержится в каждом вопросе, поэтому я поместил ваш контент в <div class="question">, затем дал метки входных данных (ухудшается немного лучше для пользователей, не являющихся JS), например, в целом:

<div class="question">
  <h2>How long is your hair?</h2>
  <label><input type="radio" name="71" value="98">Short</label>
  <label><input type="radio" name="71" value="99">Medium</label>
  <label><input type="radio" name="71" value="100">Long</label>
</div>

Затем немного скрипта, чтобы превратить его в слайдер, например:

$(".question").each(function() {
    var radios = $(this).find(":radio").hide();
    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      slide: function(event, ui) {
        radios.filter("[value=" + ui.value + "]").click();
      }
    }).appendTo(this);
});

Вы можете попробовать здесь