CODEWITHSUNDEEP
jquerysliderscrollbar
Simon Suh
Simon Suh

Reputation: 10892

how do i make a vertical scrollbar using the jQuery UI .slider()?

<!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.

Upvotes: 1

Views: 10393

Answers (1)

Py.
Py.

Reputation: 3599

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.

Upvotes: 4

Related Questions