CLICK HERE TO BUY IT TODAY! OR GET IT FREE VIA TRIALPAY  

PHP Demo Application - Source Code

/Framework/Model/Vendor/jquery-ui/development-bundle/demos/slider/multiple-vertical.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Slider - Multiple sliders</title>
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
        #demo-frame > div.demo { padding: 10px !important; }
        #eq span {
            height:120px; float:left; margin:15px
        }
    </style>
    <script type="text/javascript">
    $(function() {
        // setup master volume
        $("#master").slider({
            value: 60,
            orientation: "horizontal",
            range: "min",
            animate: true
        });
        // setup graphic EQ
        $("#eq > span").each(function() {
            // read initial values from markup and remove that
            var value = parseInt($(this).text());
            $(this).empty().slider({
                value: value,
                range: "min",
                animate: true,
                orientation: "vertical"
            });
        });
    });
    </script>
</head>
<body class="ui-widget-content" style="border:0;"><div class="demo"><p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Master volume
</p><div id="master" style="width:260px; margin:15px;"></div><p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Graphic EQ
</p><div id="eq">
    <span>88</span>
    <span>77</span>
    <span>55</span>
    <span>33</span>
    <span>40</span>
    <span>45</span>
    <span>70</span>
</div></div><!-- End demo --><div class="demo-description" style="clear:left;"><p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p></div><!-- End demo-description --></body>
</html>

PHP Demo Source Code Index