Multiple Slider widgets

Multiple Slider widgets

Hi everyone, so Im starting to learn Jquery and have looked and played with the examples.

My query is ive specifically being playing around with the Slider widgets, (vertical).

My page prints one very basic slider.  My query is how would I approach displaying 4 sliders on the page one next to the other across the page from left to right? My code is below.  Any pointers would really help :)

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="jquery-ui.css" rel="stylesheet">
    <style>
    body{
        font: 62.5% "Trebuchet MS", sans-serif;
        margin: 50px;
    }
    .demoHeaders {
        margin-top: 2em;
    }
    #dialog-link {
        padding: .4em 1em .4em 20px;
        text-decoration: none;
        position: relative;
    }
    #dialog-link span.ui-icon {
        margin: 0 5px 0 0;
        position: absolute;
        left: .2em;
        top: 50%;
        margin-top: -8px;
    }
    #icons {
        margin: 0;
        padding: 0;
    }
    #icons li {
        margin: 2px;
        position: relative;
        padding: 4px 0;
        cursor: pointer;
        float: left;
        list-style: none;
    }
    #icons span.ui-icon {
        float: left;
        margin: 0 4px;
    }
    .fakewindowcontain .ui-widget-overlay {
        position: absolute;
    }
    select {
        width: 200px;
    }
    </style>
</head>


<body>

<!-- Slider -->
<h2 class="demoHeaders">Slider</h2>
<div id="slider"></div>

<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>



$( "#slider" ).slider({
    range: true,
    values: [ 0, 30 ]
});

$( "#slider" ).slider( "option", "orientation", "vertical" );

</script>


</body>


</html>