Hello everyone!

Well I have three sliders range but only one work and I would like to know how can I do to work with three sliders at the same time.


This is my code html for the slider range:

<p>
<label for="hot" style="font-size: 18px;" >Hotel</label>
<input type="text" name="preco" id="hot" style="color:#f6931f; font-size: 13px; font-weight:bold; width: 170px;">
</p>
<div id="slider-hotel" style="height: 10px;"></div>
<hr/><br/>
<p>
<label for="preco" style="font-size: 18px;">Preço</label>
<input type="text" name="preco" id="precos" style="color:#f6931f; font-size: 13px; font-weight:bold; width: 100px;">
</p>
<div id="slider-preco" style="height: 10px; "></div>
<hr/><br/>
<p>
<label for="during" style="font-size: 18px;" >Duracao</label>
<input type="text" name="preco" id="during" style="color:#f6931f; font-size: 13px; font-weight:bold; width: 150px;">
</p>
<div id="slider-duracao" style="height: 10px;"></div>

This is my code to show the list of products:

<div id="containerLista" style="margin-left: -10px;" data-hotel="<?php echo $hotel ?>" data-duracao = "<?php echo $noite ?>" >
<div class="leftBox" data-checkbox="<?php echo $idtema ?>"> <div id="left"> <img src="/img/<?php echo $nomeImagem ?>" style="width: 250px; height: 183px; padding-left: 5px; padding-top: 5px; padding-right: 5px;"/> </div>
<div id="right" style="border-left: 2px solid #CFCFCF;"> <h3><?php echo $titulo ?></h3> <div class="info_row" style="margin-top: 5px;"><span>País:</span><?php echo utf8_encode($pais) ?></div> <div class="info_row" style="margin-top: 5px;"><span>Duração:</span><?php echo $dia . ' dias e ' ?><?php echo $noite . ' noites' ?></div>
<div class="info_row2"> <span style="margin-top: 10px;">Preço</span>
</div>
<span class="vacationsDetails-header-buy"> <span class="price" itemprop="price" style="color: #EF4CC8; font-size: 1.7em; float: right; margin-top: 33px;"><?php echo $preco . '€' ?></span> <span class="icon-perperson"></span> </span> <div class="vacationsDetails-included" style="margin-top:5px; padding-bottom: 0px; margin-bottom: 0px;"> <br/><br/><br/><br/><br/>
<div> <p class="vacationsDetails-header-buy Promocao" style="margin-top: -53px; height: 45px;"> <a href="verOferta.php?idProduto=<?php echo $idProduto ?>" class="botaoPromocao" style="top: 7px; margin-right: 70px;font-size: 1.5em;">Comprar</a> </p> </div> </div> </div> </div>
</div>


And the javascript code(the same with the other two sliders):


<script>
function showProducts(minPrice, maxPrice) {
$("div#containerLista").hide().filter(function() {
var price = parseInt($(this).data("duracao"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}

$( "#slider-duracao" ).slider({
range: true,
min: <?php echo $noiteMIN ?>,
max: <?php echo $noiteMAX ?>,
values: [<?php echo $noiteMIN ?>,<?php echo $noiteMAX ?>],
slide: function(event, ui){
var minDuracao= ui.values[0],
maxDuracao = ui.values[1];
$("#during").val(ui.values[0] + " Noites - " + ui.values[1] + " Noites");
showProducts(minDuracao,maxDuracao);
}
});
$("#during").val($("#slider-duracao").slider("values",0) + " Noites - " + $("#slider-duracao").slider("values",1) + " Noites");
</script>