jquery slide help

[herghost]

Hi people

 

I am a noob at jquery/js/etc and so I have run into some problems in what I am trying to do.

 

I am using the jquery ui slider and the idea is for every increment I have a different div show up, while hiding any previous divs. I have 8 divs in total which need to be shown depending on the position of the slider.

 

Here is what I have:

 

<script>
$(function() {
	$( "#slider" ).slider({
		value:100,
		min: 4,
		max: 64,
		step: 4,
		slide: function( event, ui ) {
			$( "#slots" ).val( ui.value );
			if (ui.value < '5')
			{
				$('#test').css('display', 'block');

			}
			if (ui.value < '9')
			{
				$('#test1').css('display', 'block');

			}

		}
	});
	$( "#slots" ).val( $( "#slider" ).slider( "value" ) );
});
</script>

 

The problems I am experiencing are basically that both divs are appearing and will not hide even when the slider is above 8, and my slider starts at the max value instead of the min!

 

Can anyone help me out?

 

Cheers

[herghost]

never mind, got it!

 

<script>
$(function() {
	$( "#slider" ).slider({
		value:4,
		min: 4,
		max: 64,
		step: 4,
		slide: function( event, ui ) {
			$( "#slots" ).val( ui.value );
			if (ui.value < '5')
			{
				$('#test').css('display', 'block');

			}
			else
			{
				$('#test').css('display', 'none');
			}
			if (ui.value == '8')
			{
				$('#test1').css('display', 'block');

			}
			else
			{
				$('#test1').css('display', 'none');
			}

		}
	});
	$( "#slots" ).val( $( "#slider" ).slider( "value" ) );
});
</script>