jquery - 個々のスライダーで複数の要素の幅を制御

Question

スライダーで複数の要素の幅を制御しようとしています。これを行う最善の方法は何ですか？

http://jsfiddle.net/WQbsW/

<ul>

<li id="text-1">1<div id="slider-vertical" style="height: 200px;"></div></li>
<li id="text-2">2<span id="slider-vertical" style="height: 200px;"></span></li>
<li id="text-3">3<span id="slider-vertical" style="height: 200px;"></span></li>
<li id="text-4">4<span id="slider-vertical" style="height: 200px;"></span></li>
<li id="text-5">5<span id="slider-vertical" style="height: 200px;"></span></li>
<li id="text-6">6<span id="slider-vertical" style="height: 200px;"></span></li>

</ul> 

$(document).ready(function() {
    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 0,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
    $('#text').css('width', ui.value + '%');
          //$("#text").text(ui.value + '%');   
        }
    });
});