Bootstrap slider range value text boxes

So basically I tried to achieve what's in this jsfiddle: http://jsfiddle.net/FPCRb/ Have a slider bar for a range of values and two text boxes as well.

Here is my HTML table:

<table class="table borderless">
    <thead>
      <tr>
        <th>Rank</th>
        <th>+/-</th>
        <th>Searches</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="radio" name="optradio" class="custom"> ALL</td>
        <td><input type="radio" name="optradio2" class="custom2"> ALL</td>
        <td><input id="slider" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
        <td><button id="reset" type="button" class="btn btn-success">Reset</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
        <td><input type="checkbox" class="custom-selector2"> Up</td>

        <td><input type="text" class="form-control form-inline col-xs-1 sliderValue" style="width: 60px" placeholder="From"  data-index="0" value="10">
          <label class="col-xs-1" style="font-size: 22px">→</label>
          <input type="text" class="form-control form-inline col-xs-1 sliderValue" style="width: 60px" placeholder="To"  data-index="1" value="90"></td>
      </tr>

      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
        <td><input type="checkbox" class="custom-selector2"> Down</td>
        <td><button id="reset" type="button" class="btn btn-info">Set interval</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
        <td><input type="checkbox" class="custom-selector2"> No movement</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Not in top 100</td>
      </tr>
    </tbody>
  </table>

Here is my script:

 $(document).ready(function() {
     $("#slider").slider({
         min: 0,
         max: 1000,
         step: 1,
         range: true,
         values: [10, 90],
         tooltip: 'always',
         slide: function(event, ui) {
             for (var i = 0; i < ui.values.length; ++i) {
                 $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
             }
         }
     });

     $("input.sliderValue").change(function() {
         var $this = $(this);
         $("#slider").slider("values", $this.data("index"), $this.val());
     });
 });

I need to be able to both specify in textboxes the value and use the sliders, along with a reset button.

Is looks like I wanted it to, but moving the slider doesn't change the text boxes and vice versa, what am I missing?

In the JSFiddle you link, the element with an ID of "slider" is an empty div which jQueryUI correctly populates with custom slider markup. But in your code the element is an input. Replace it with an empty div as shown in the docs:

https://jqueryui.com/slider/