SO fiddle
Test Fiddle mainly for SO Questions
by Nick Craver
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<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>
<button>Get Value</button>
CSS
label { display: block; float: left; text-align: center; width: 33%; }
.question > div { clear: left; }
JavaScript
$(".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);
});
$("button").click(function() {
alert($(":radio[name=71]:checked").val());
});