Price filter applied to <div>

Question

My filter is the below: Design:

<div id="price-filter" class="panel-collapse collapse in" style="height: auto;">
<div id="price-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 10%; width: 70%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 10%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 80%;"></a></div>
<br>
<span class="min-price-label pull-left">$100</span>
<span class="max-price-label pull-right">$800</span>
<div class="clearer"></div>
</div>
</div>

Filter Js Code:

tjq(document).ready(function() {
    tjq("#price-range").slider({
        range: true,
        min: 0,
        max: 1000,
        values: [ 100, 800 ],
        slide: function( event, ui ) {
            tjq(".min-price-label").html( "$" + ui.values[ 0 ]);
            tjq(".max-price-label").html( "$" + ui.values[ 1 ]);
        }
    });
    tjq(".min-price-label").html( "$" + tjq("#price-range").slider( "values", 0 ));
    tjq(".max-price-label").html( "$" + tjq("#price-range").slider( "values", 1 ));

    tjq("#rating").slider({
        range: "min",
        value: 40,
        min: 0,
        max: 50,
        slide: function( event, ui ) {

        }
    });
});

The div that i need to filter is:

<div id="hotel-list">
  <article data-price="10">Article with price 10 </article>
  <article data-price="20">Article with price 20 </article>
  <article data-price="30">Article with price 30 </article>
  <article data-price="40">Article with price 40 </article>
</div>

The slider slides but without filtering. Could you please advise me how can i add the action so the slide filter to filter something Thank you for your time.

Answer 1

http://jsfiddle.net/1as9vyyb/1/

        $('article[data-price]').each(function() {
            var dPrice = $(this).attr('data-price');
            if ( dPrice < ui.values[ 0 ] || dPrice > ui.values[ 1 ] ) 
                $(this).hide();
            else
                $(this).show();
        });