Demo of Slider Orientation using JQuery UI

HTML

<div id="slider"></div> 
<div id=d1></div>
<input type=radio  name=r1 id=c1 value='vertical' > Vertical <input type=radio  name=r1 id=c2 value='horizontal' checked> Horizontal 

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$(function() {
 $( "#slider" ).slider({
	 slide: function( event, ui ) {
 $( "#d1" ).html( ui.value );
  }
});
});
////////////////
$("input:radio[name=r1]").click(function() {
	
$( "#slider" ).slider({
orientation: $("input[name=r1]:checked").val()
})
})
////////////////
})
</script>