Using jQuery UI to convert radio buttons to slider elements

Question

I have a form that displays using radio buttons:

<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 

There are about 15 questions here, and I would like the whole form to be displayed using sliders using JQuery (JQuery UI seems to be the most likely candidate).

I found several plugins for converting selection blocks to sliders (for example, selectToUISlider ), but it’s not used for radio buttons.

I'm sure that you can somehow minimize your own user interface using a standard slider, but I don’t know where to start. Has anyone already made a plugin to achieve this?

Answer 1

Here is the basic structure of one option, I'm not sure how your questions differ (do they all have 3 options?), So the style will be different, just trying to demonstrate the concept.

I'm not sure what each question consists of, so I placed your content in <div class="question"> and then gave input shortcuts (got a little worse for non-JS users), for example:

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

Then a little script to convert it to a slider, for example:

 $(".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 try here