SO fiddle

Test Fiddle mainly for SO Questions

by CristianCantoro

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<ol>
	<li id="q1">
		<fieldset class="question">
			<legend><span>Question 1</span></legend>
			<div class="round"><div class="slider"></div></div>
			<label for="q1_1"><input type="radio" name="q1" id="q1_1" data-value="86" value="N/A" checked>N/A</label>
			<label for="q1_2"><input type="radio" name="q1" id="q1_2" data-value="87" value="Strongly disagree">Strongly Disagree</label>
			<label for="q1_3"><input type="radio" name="q1" id="q1_3" data-value="88" value="Disagree">Disagree</label>
			<label for="q1_4"><input type="radio" name="q1" id="q1_4" data-value="89" value="Agree">Agree</label>
			<label for="q1_5"><input type="radio" name="q1" id="q1_5" data-value="90" value="Agree Strongly">Agree Strongly</label>
		</fieldset>
	</li>
	<li id="q2">
		<fieldset class="question">
			<legend><span>Question 2</span></legend>
			<div class="round"><div class="slider"></div></div>
			<label for="q2_1"><input type="radio" name="q2" id="q2_1" data-value="86" value="N/A" checked>N/A</label>
			<label for="q2_2"><input type="radio" name="q2" id="q2_2" data-value="87" value="Strongly disagree">Strongly Disagree</label>
			<label for="q2_3"><input type="radio" name="q2" id="q2_3" data-value="88" value="Disagree">Disagree</label>
			<label for="q2_4"><input type="radio" name="q2" id="q2_4" data-value="89" value="Agree">Agree</label>
			<label for="q2_5"><input type="radio" name="q2" id="q2_5" data-value="90" value="Agree Strongly">Agree Strongly</label>
		</fieldset>
	</li>
	<li id="q3">
		<fieldset class="question">
			<legend><span>Question 3</span></legend>
			<div class="round"><div class="slider"></div></div>
			<label for="q3_1"><input type="radio" name="q3" id="q3_1" data-value="86" value="N/A" checked>N/A</label>
			<label for="q3_2"><input type="radio" name="q3" id="q3_2" data-value="87" value="Strongly disagree">Strongly Disagree</label>
			<label...

CSS

label { display: block; float: left; text-align: center; width: 20%; }
.question > div { 
    clear: left;
}
ol li {
  margin: 0 0 2em;
  padding: 0;
  vertical-align: top; 
}
ol .round {
  background-color: #e6e6e6;
  border-radius: 16px;
  margin: 0 0 0.5em; 
  width: 90%;
  margin: 0 5%;
}

.ui-slider-horizontal {
  background: transparent;
  /* border: 0; */
  border-radius: 1em;
  border: none;
  height: 2em;
  /* margin: 0 0 0 2em; */
   width: 90%; 
}

.ui-slider-horizontal .ui-slider-handle {
  background: #000;
  border-radius: 0.7em;
  height: 1.5em;
  width: 46px;
  top: 0.2em;
  margin-left: 0; 
  margin: 0 2px;
}

JavaScript

$('.question').each(function() {
	var radios = $(this).find(':radio').hide();
	$('.slider').slider({
		min: parseInt(radios.first().data('value'), 10),
		max: parseInt(radios.last().data('value'), 10),
		slide: function(event, ui) {
            $(this).closest('.question').find('[data-value=' + ui.value + ']').click();
		}
	});
});

$('button').click(function() {
	alert($(':radio:checked').map(function() { 
        return this.name + ': '+  this.value; 
    }).get());;
});