使用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 UI似乎是最有可能的候選人）。

我發現了幾個插件用於將選擇框轉換爲滑塊（例如selectToUISlider），但沒有用於單選按鈕。

我確定有可能使用標準的UI滑塊以某種方式推出自己的產品，但我並不知道從哪裏開始。有沒有人已經做到了這一點插件？

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); 
}); 

You can give it a try here