jQuery звездный слайдер фильтр

Question

Я пытаюсь создать фильтр слайдера с рейтингом звезд в jquery, но ничего не происходит.

Фильтр:

<div class="panel-collapse collapse filters-container" id="rating-filter"> 
    <div class="panel-content"> 
     <div class="five-stars-container editable-rating" data-label-fullrating="5 STELE" data-label-norating="Fara" data-label-rating="STELE" data-rating="1" id="rating"></div><span>TOATE</span> 
    </div> 
</div> 

Divs быть отфильтрованы является:

<div data-stars="2">2 STARS</div> 
<div data-stars="2">2 STARS</div> 
<div data-stars="4">5 STARS</div> 
<div data-stars="3">3 STARS</div> 
<div data-stars="1">1 STARS</div> 

И мой не код рабочего JQuery является:

tjq("#rating").slider({ 
    range: "min", 
    value: 4, 
    min: 0, 
    step: 1, 
    max: 5, 
    slide: function(event, ui) { 
     var label_rating = ''; 
     if (ui.value == 0) { 
      label_rating = tjq("#rating").data('label-norating'); 
     } else if (ui.value == 5) { 
      label_rating = tjq("#rating").data('label-fullrating'); 
     } else { 
      label_rating = ui.value + ' ' + tjq("#rating").data('label-rating'); 
     } 
     tjq("#rating-filter .panel-content > span").text(label_rating); 
     $('div[data-stars]').each(function() { 
      var dStars = $(this).attr('data-stars'); 
      if (dStars < ui.values[0] || dStars > ui.values[1]) $(this).hide(); 
      else $(this).show(); 
     }); 
    } 
}); 

Спасибо заранее, если вы могли бы мне помочь разобраться в этом.

Answer 1

Попробуйте изменить

if (dStars < ui.values[0] || dStars > ui.values[1]) 

по

if (dStars != ui.value) 

DEMO

$("#rating").slider({ 
    range: "min", 
    value: 4, 
    min: 0, 
    step: 1, 
    max: 5, 

    slide: function(event, ui) { 
     var label_rating = ''; 
     if (ui.value == 0) { 
      label_rating = $("#rating").data('label-norating'); 
     } else if (ui.value == 5) { 
      label_rating = $("#rating").data('label-fullrating'); 
     } else { 
      label_rating = ui.value + ' ' + $("#rating").data('label-rating'); 
     } 
     $("#rating-filter .panel-content > span").text(label_rating); 
     $('div[data-stars]').each(function() { 
      var dStars = $(this).attr('data-stars'); 

      if (dStars != ui.value) 
       $(this).hide(); 
      else 
       $(this).show(); 
     }); 
    } 
});