cacher une partie de la page

Bonjour, j'ai un problème de codage. Ça fait une semaine que je cherche comment cacher une partie de mon code.

Je voudrais par exemple cacher le point1 quand il est compris entre les deux curseurs de mon slider. (En gros cacher tous les span compris entre la valeur min et max sélectionnées avec mes handles).

Auriez vous une idée ? J'ai cherché à faire des boucles mais rien y fait.

Merci d'avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
	var realvalues = [0, 10, 20, 50, 100, 500, 1000];
	$( "#slider" ).slider({
		orientation: 'vertical',
		range: true,
		isRTL: true,
		min: 0,
		max: 6,
		step: 1,
		values: [ 1, 2 ],
		slide: function( event, ui ) {
			$( "#amount" ).val( realvalues[ui.values[ 0 ]] + " km - " + realvalues[ui.values[ 1 ]] + " km");
		}
	});
	$( "#amount" ).val( realvalues[$( "#slider" ).slider( "values", 0 )] + " km - " + realvalues[$( "#slider" ).slider( "values", 1 )]+" km" );
 
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<p>
		<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
		<div id="slider" style="height: 300px; color: #aaaaaa; " align="absmiddle">
		<span class="point0" style="margin-top:-7.5px; margin-left:-3px; visibility = visible;"></span>
		<span class="point1" style="margin-top:43px; margin-left:-3px; visibility = visible;"></span>
		<span class="point2" style="margin-top:43px; margin-left:-3px; visibility = visible;"></span>
		<span class="point3" style="margin-top:43px; margin-left:-3px; visibility = visible;"></span>
		<span class="point4" style="margin-top:43px; margin-left:-3px; visibility = visible;"></span>
		<span class="point5" style="margin-top:43px; margin-left:-3px; visibility = visible;"></span>
		<span class="point6" style="margin-top:43px; margin-left:-3px; visibility = visible;"></span>
		</div>