By default, the slider widget will render horizontally. It's easy for us to change the slider orientation to a vertical layout using the orientation
option.
We'll use the following HTML to define our two widgets. The first slider will be vertical while the second uses the default horizontal layout:
<div class="slider-container"> <div id="vslider"></div> </div> <div class="slider-container"> <div id="hslider"></div> </div>
Next, we'll use the following JavaScript code to instantiate the two widgets:
$(function() { $( "#vslider" ).slider({ orientation: "vertical", range: "min", min: 1, max: 200, value: 128 }); $( "#hslider" ).slider({ range: "min", min: 0, max: 200, value: 128 }); });
If you look at the two sliders in your browser, you can see the contrast between the vertical layout and the default horizontal...