jQuery UI Range Slider with arrows

by mrjordy

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="leftPane">
  <br><br>
  <div id="slider1">
    <div id="slider1Handle" class="ui-slider-handle"></div>
  </div><br />
  <div id="slider2">
    <div id="slider2Handle" class="ui-slider-handle"></div>
  </div><br />
  <div id="slider-range"></div>
</div>

<div class="rightPane">
  <div id="getdata">
    <table width="100%" border="1" id="theTable">
      <tbody>
        <tr>
          <th>Filter a</th>
          <th>Filter b</th>
          <th>Filter c</th>
          <th>Data a</th>
          <th>Data b</th>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>15</td>
          <td>dummy 1</td>
          <td>dummy 1a</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>15</td>
          <td>dudil sommy 1</td>
          <td>dummy 1a</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>15</td>
          <td>dummy 1</td>
          <td>hols 1a</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>15</td>
          <td>hols cos1</td>
          <td>sd dim d1a</td>
        </tr>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>15</td>
          <td>dhke 1</td>
          <td>kslc s1a</td>
        </tr>
        <tr>
          <td>6</td>
          <td>6</td>
          <td>15</td>
          <td>ddd1</td>
          <td>dummy 1a</td>
        </tr>
        <tr>
          <td>7</td>
          <td>7</td>
          <td>15</td>
          <td>dugkmmy 1</td>
          <td>soem a</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.leftPane {
  width: 300px;
  vertical-align: top;
  display: inline-block;
  padding-right: 40px;
  border-right: 1px solid red;
  height: 100%;
}
.rightPane {
  display: inline-block;
  width: calc(100% - 360px);
}

#slider1Handle, #slider2Handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    margin-left: -1.6em;
    text-align: center;
    line-height: 1.6em;
  }

#theTable tr {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
}
#theTable td {  
        min-width: 150px;
}

tr td:first-child {
    font-size:16px;
}

// Here is the CSS to make the slider look pretty:
#slider-range, #slider-range2 {
  width:300px;
  margin-top:10px;
}
body {
  margin: 15px;
}
#slider-range2.ui-slider-horizontal {
    border: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-range, #slider-range2.ui-slider-horizontal .ui-slider-handle {
    background: url("http://unbug.ru/examples/jquery/slider/slide.png") repeat scroll 0 0 transparent;
}
#slider-range2.ui-slider-horizontal .ui-slider-range {
    background-position: 0 -42px;
    background-repeat: repeat-x;
    height: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle {
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 0 none;
    height: 21px;
    top: 0;
    width: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle:focus {
    outline: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle + .ui-slider-handle {
    background-position: -21px 0;
}

JavaScript

$(function() {
  var handle1 = $( "#slider1Handle" );
  $("#slider1").slider({
    value: 20,
    min: 0,
    max: 20,
    orientation: "horizontal",
    range: "min",
    animate: true,
    create: function() {
        handle1.text( $( this ).slider( "value" ) );
      },
    slide: function(event, ui) {
      $('#s1').html(jQuery('#slider1').slider('value'));
      // in this function we can define what happens when a user changes the sliders        
      handle1.text( ui.value );
      var table = document.getElementById("theTable");
      for (var i = 1, row; row = table.rows[i]; i++) {
        //iterate through rows (we SKIP the first row: counter starts at 1!)
        for (var j = 0, col; col = row.cells[j]; j++) {
          //iterate through columns: if first column not in range: HIDE, else SHOW

          if (j == 0) { // if first column
            if ($(col).html() <= $('#slider1').slider('value')) {
              // if in interval
              $(row).show();
            } else {
              $(row).hide();
            }
          }
        }
      }
    }
  });
  
//----------------------------------------------------------------------------
  
  var handle2 = $( "#slider2Handle" );
  $("#slider2").slider({
    value: 50,
    min: 0,
    max: 50,
    orientation: "horizontal",
    range: "min",
    animate: true,
    create: function() {
        handle2.text( $( this ).slider( "value" ) );
      },
    slide: function(event, ui) {
      $('#s2').html(jQuery('#slider2').slider('value'));
      // in this function we can define what happens when a user changes the sliders        
      handle2.text( ui.value );
      var table = document.getElementById("theTable");
      for (var i = 1, row; row = table.rows[i]; i++) {
        //iterate through rows (we SKIP the first row: counter starts at 1!)
        for (var j = 0, col; col = row.cells[j]; j++) {
          //iterate through columns: if first column not in range: HIDE, else SHOW

          if (j ==...