Home/ Questions/Q 6546223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T11:40:56+00:00

<!DOCTYPE html> <html> <head> <link href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css rel=stylesheet type=text/css/> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script> <script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js></script> <style type=text/css>

  • 0
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script>
    $(document).ready(function() {
        $("#slider").slider( "option", "orientation" );

        //getter
        var orientation = $( "#slider" ).slider( "option", "orientation" );
        //setter
        $( "#slider" ).slider( "option", "orientation", 'vertical' );
    });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="slider"></div>

</body>
</html>

I added in the 

    //getter
    var orientation = $( "#slider" ).slider( "option", "orientation" );
    //setter
    $( "#slider" ).slider( "option", "orientation", 'vertical' );

part of the code in hopes of getting the demo page’s scrollbar to show up vertical but all it did was hide the horizontal scrollbar that was already there and now i just have a blank page. How exactly do I implement the vertical scrollbar option? I don’t quite understand the instructions listed on the documentation page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think this part of the doc is rather clear :

        $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
    });

    You juste have to do $( "#slider" ).slider( { "orientation" : "vertical"} ); to create a vertical slider.

    • 0