title: JQueryUI slider instead of number input type
body: <p>I have a simple View in MVC3, with three inputs of type number. What I need to do is display a JQueryUI slider instead of input. I tried like this, but it only changes the shape of input form and there is no slider.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;script&gt;
          $(function () {
              $(".nmbr").slider({
                  range: "min",
                  min: 1,
                  max: 100,
                  slide: function (event, ui) {
                      $("input[name=" + $(this).attr("id") + "_value]").val(ui.value);
                  }
              });
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>And html:</p>
  
  <pre><code>&lt;div&gt;
  &lt;label for="number"&gt;Value:&lt;/label&gt;
  &lt;input type="text" name="first_value" style="border:0;" /&gt;
  &lt;input type="number" class="nmbr" id="first" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;label for="number"&gt;Value:&lt;/label&gt;
  &lt;input type="text" name="second_value" style="border:0;" /&gt;
  &lt;input type="number" class="nmbr" id="second" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;label for="number"&gt;Value:&lt;/label&gt;
  &lt;input type="text" name="third_value" style="border:0;" /&gt;
  &lt;input type="number" class="nmbr" id="third" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p></p>
  
  <p>Where did I go off the path?</p>