FM_Test

by XGundam05

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<div class="half">
    <span class="topSlider"><div id="slider"></div></span>
    <div id="sec1" class="section">
        hi
    </div>
    <div id="sec2" class="section">hi</div>
    <div id="sec3" class="section">hi</div>
    <div id="sec4" class="section hidden">hi</div>
    <div id="sec5" class="section hidden">hi</div>
    <div id="sec6" class="section hidden">hi</div>
    <div id="sec7" class="section hidden">hi</div>
    <div id="sec8" class="section hidden">hi</div>
</div>

CSS

#slider{ margin:10px 10px 10px 10px; height:.3em }
.topSlider .ui-slider .ui-slider-handle{ 
    height: .8em; 
    width:.8em;
}
.half{ width: 50% }
.hidden{ display: none }

JavaScript

$(document).ready(function(){
    $('#slider').slider({
             min: 35, 
             max: 85,
             slide: function(event, ui){
                 for(var i = 1; i <= 8; i++){
                     if(i <= (ui.value * 1)/10)
                         $('#sec' + i).show('fast');
                     else
                         $('#sec' + i).hide('fast');
                 }
             }
    });
});