Вот смотрите
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function ()
{
var rd = $('.output input:radio');
$("#slider-vertical").slider({
animate: true,
orientation: "vertical",
range: "min",
min: 0,
max: 5,
value: 1,
slide: function(event, ui) {
$("#rangevalue").html(rd.eq(ui.value).val());
rd.eq(ui.value).prop('checked', true)
}
});
$("#rangevalue").html( $("#slider-vertical").slider("value"));
})
</script>
<div class="output">
<input type="radio" class="radio" name="button" value="u_0" style="display:none;">
<input type="radio" class="radio" name="button" value="u_1" onclick="action(u_0)">
<input type="radio" class="radio" name="button" value="u_2" onclick="action(u_1)">
<input type="radio" class="radio" name="button" value="u_3" onclick="action(u_2)">
<input type="radio" class="radio" name="button" value="u_4" onclick="action(u_3)">
<input type="radio" class="radio" name="button" value="u_5" onclick="action(u_4)">
</div>
<label for="rangevalue">Value:</label>
<div id="rangevalue" style="border:0; color:#f6931f; font-weight:bold;"></div>
<div id="slider-vertical" style="height:200px;"></div>
Указано value: 1, это означает что по умолчанию ползунок будет выставлен на уровне одного деления. Однако он так и показывает "1", хотя если сдвинуть ползунок наверх или вниз, а потом обратно, то он уже будет показывать value кнопки. Вот хотелось бы чтобы он сразу показывал это значение.