使用jqueryui将单选按钮转换为滑块元素

我有一个用单选按钮呈现的表单，如下所示：

<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（jQueryUI似乎是最有可能的候选）用滑块呈现整个表单

我发现了一些插件，用于将选择框转换为滑块（例如），但没有用于单选按钮的插件

---

我确信使用标准的UI滑块可以实现我自己的滚动，但我真的不知道从哪里开始。有人已经制作了插件来实现这一点吗

这是一个选项的基本结构，我不确定你的问题有什么不同（它们都有3个选项吗？），因此样式会有所不同，只是试图展示概念

我不确定每个问题都包含哪些内容，所以我将您的内容放在一个

中，然后给输入标签（对于非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);
});

$（“.question”）。每个（函数（）{
var radios=$（this.find（“：radio”）.hide（）；
$（“”）。滑块({
min:parseInt（radios.first（）.val（），10），
max:parseInt（radios.last（）.val（），10），
幻灯片：功能（事件、用户界面）{
radios.filter（“[value=“+ui.value+”]）。单击（）；
}
}).附于（本）；
});

---

这是我在电视上见过的最好的答案之一。请给我们再来点尼克领带好吗？那太棒了，效果也很好。其他新闻方面：JSFIDLE非常棒