En utilisant l'interface utilisateur JQuery pour convertir les boutons radio en éléments coulissants

Question

J'ai une forme qui est rendu avec des boutons radio comme ceci:

<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 

Il y a environ 15 questions de ce genre, et je voudrais avoir toute la forme rendu avec des curseurs, en utilisant JQuery (Jquery UI semble être le candidat le plus probable).

J'ai trouvé quelques plugins pour convertir des boîtes de sélection en curseurs (par exemple selectToUISlider) mais aucun pour les boutons radio.

Je suis sûr qu'il est possible de rouler mon propre en utilisant le curseur de l'interface utilisateur standard, mais je ne sais pas par où commencer. Est-ce que quelqu'un a déjà fait un branchement pour y parvenir?

Answer 1

Voici la structure de base d'une option, je ne sais pas comment vos questions diffèrent (ont-elles toutes trois options?) Donc le style pourrait varier, essayant simplement de démontrer le concept.

Je ne suis pas sûr de ce que chaque question est contenue, donc je mets votre contenu dans un <div class="question">, puis a donné les entrées étiquettes (un peu mieux se dégrade pour les utilisateurs non-JS), comme ce général:

<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> 

Alors un peu de script pour le transformer en un curseur, comme ceci:

$(".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); 
}); 

You can give it a try here