<div id='test' class='ml-5'>

  <table id='table' class='table table-bordered'>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>

    </tr>

    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>

    </tr>

    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>

    </tr>

    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>

    </tr>

    <tr>
      <td colspan='27'>

        <input type="range" id="slider" name="volume" value='0' min="0" max="100">
        <label for="volume"> Двигаем и любуемся!</label>

      </td>

    </tr>

    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
      <td>test6</td>
      <td>test7</td>
      <td>test8</td>
      <td>test9</td>

    </tr>

  </table>

</div>

#test {
  width: 600px;
  height: 400px;
  background-color: yellow;
  overflow-x: hidden;
  white-space: nowrap;
}

#slider {
  width: 90%;
}

$("body").on("input", "#slider", function() {
  let v = $("#table").width() / 150 * $(this).val();
  $("#test").scrollLeft(v);
});