Filter with jQuery by input range

Question

A few days ago, I asked on this forum about filter with jQuery. Some people helped me but now I need to do filter no by checkboxes, but with input type="range". Is it possible? My code looks like: JSFIDDLE

My code.

 $(document).ready(function () { $('input.szukajnapraw').on('click', function () { var $checked = $('input.szukajnapraw:checked'), $trs = $('.results > tr'); $trs.toggle(!$checked.length); if ($checked.length) { $checked.each(function () { var text = $(this).attr('rel').trim().toLowerCase(); $trs.find('td:nth-child(1),td:nth-child(4),td:nth-child(7),td:nth-child(13)').filter(function(){ return text == $(this).text().trim().toLowerCase(); }).parent().show(); }) } }).last().change(); }); 

 <div class="box col-md-10 items"> <label>Ilość dysków</label> <input type="range" min="1" max="24" /> </div> <div class="box col-md-10 items"> <label>Pojemność</label> <input type="range" id="range1" min="1" max="96" /> </div> <div class="box col-md-10 items"> <label>Wydajność</label> <input type="range" min="50" max="2000" /> </div> <table class="table table-striped table-bordered"> <thead> <tr> <th>Producent</th> <th>Produkt</th> <th>Foto</th> <th>Typ</th> <th>Cena netto</th> <th>Cena brutto</th> <th>Interface</th> <th>Ilość dysków</th> <th>Pojemność</th> <th>RAID</th> <th>Wydajność</th> <th>Opis</th> <th>Specyfikacja</th> <th>Zakup</th> </tr> </thead> <tbody class="results"> <tr> <td>Tiger Technology</td><td>Macierz 123 TEST</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;"/></td><td>NAS Network Attached Storage</td><td>69.00</td><td>124.00</td><td>Thunderbolt2</td><td>60</td><td>5tb</td><td>0 1</td><td>Duża</td><td>dsadsadasdawderwasfcagfae</td><td style='display:none;'>1</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='30' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>G-Tech</td><td>vcxv</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>50.00</td><td>70.00</td><td>USB 3.0</td><td>5</td><td>400</td><td>5*5*</td><td>500</td><td>dsadsad</td><td style='display:none;'>1</td><td><a href=http://www.o2.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='34' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Tiger Technology</td><td>das sad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>eSATA</td><td>6</td><td>400</td><td>5/8/8</td><td>500</td><td>dasdasdsa</td><td style='display:none;'>2</td><td><a href=http://www.nw.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='35' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>LaCie</td><td>Macierz</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>98.00</td><td>120.00</td><td>miniSAS</td><td>6</td><td>4 TB</td><td>5</td><td>Duża</td><td>Tu powinien być opis, ale testuje i go nie wpisuje! </td><td style='display:none;'>2</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='36' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>LaCie</td><td>dsad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>Thunderbolt</td><td>8</td><td>400</td><td>8/8/8</td><td>500</td><td>fasdf</td><td style='display:none;'>2</td><td><a href=http://fsdfsdf target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='37' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>mLogic</td><td>test</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>80.00</td><td>100.00</td><td>Thunderbolt</td><td>8</td><td>900</td><td>5/8/8</td><td>600</td><td>fsdfd</td><td style='display:none;'>1</td><td><a href=http://fsdfds target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='38' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>Zdjęcie</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>4564.00</td><td>999999.99</td><td>Thunderbolt</td><td>4</td><td>5</td><td>1</td><td>300</td><td>SPrawdzam czy działaja fotki .... .... .. .. .. .</td><td style='display:none;'>1</td><td><a href=http://feasd target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='39' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>g</td><td><img src="admin/forms/temp/rc.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>45.00</td><td>5.00</td><td>Thunderbolt</td><td>12</td><td>1</td><td>1</td><td>l</td><td>l</td><td style='display:none;'>1</td><td><a href=http://l target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='40' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='43' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> <input type='hidden' name='id' value='44' /> <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr> </tbody> </table> 

Answer 1

Try utilizing .each() , where i is index of element within collection , el is element , el.value is value of input type="range" current element within loop

$("input[type=range]").each(function(i, el) {
  console.log(el.value);
});

https://jsfiddle.net/f3x5jfjg/15/

Answer 2

Yes, that can be done. You would have to take advantage of the change event, not the click event though.

As the ranges are wide, and it's hard to find a match I have set a match by default and used addClass() and removeClass() instead of hide() and show() just to demonstrate how to approach this. Pick any other match, if you can find one, and set your ranges to it.

$(document).ready(function () {
    var ranges = $('div.box > input[type=range]'),
        table  = $('table.table'),
        hrow   = $('tr:has(th)', table),
        orow   = $('tr:has(td)', table);

    ranges.on('change', function() {
        //init range object
        var orange = [];

        //determine value setting & index for each range
        ranges.each(function() {
            var thisrange = {};
            thisrange.value = this.value;
            thisrange.label = $(this).prev('label').text().trim();
            thisrange.column  = $.inArray( thisrange.label, $('th',hrow).map(function(i,v) {
                return $(v).text().trim();
            }) );
            $(this).next('label').text( this.value );
            orange.push( thisrange );
        });

        //hide [remove hightlight] all rows but header
        orow.removeClass('highlight');

        //show [hightlight] rows with values
        orow.filter(function() {
            var result = true,that = this;
            $.each( orange, function(i,v) {
                result = result && $('td',that).eq(v.column).text().trim() == v.value;
            });
            return result;
        }).addClass('highlight');
    }).change();
});

DEMO

NOTE : Some values in the filter columns are non-numeric and would never be set on the range! And some numeric values are out of range.

Update

Here is a version that will filter just by the changed range. When the page loads it filters by the value of the first range.

$(document).ready(function () {
    var ranges = $('div.box > input[type=range]'),
        table  = $('table.table'),
        hrow   = $('tr:has(th)', table),
        orow   = $('tr:has(td)', table);

    ranges.on('change', function() {
        var value = this.value,
            label = $(this).prev('label').text().trim(),
            column  = $.inArray( label, $('th',hrow).map(function(i,v) {
                return $(v).text().trim();
            }) );

        //display the new value
        $(this).next('label').text( value );

        //hide [remove hightlight] all rows but header
        orow.removeClass('highlight');

        //show [hightlight] rows with values
        orow.filter(function() {
            return $('td',this).eq(column).text().trim() == value;
        }).addClass('highlight');
    }).eq(0).change();
});

DEMO