title: How to change the input values, min value and max value in the input type=range using jquery?
body: <p>I'm  new to jquery and html5. </p>
  
  <p>My jquery is:</p>
  
  <pre><code>var A_Route=['A1','A2','A3',.....'A50'];
  var counter=0;
  $("input[name='radio-choice']").change(function(){
      if ($(this).val() == "on")
      {
          $('#slider').val(A_Route[counter]);
  
      }
  </code></pre>
  
  <p>When I select a radio button whose value is ON the min and max value for the slider should automatically become A1 and A50 respectively. And as I slide through the slider my values should change from A1 to A50.</p>
  
  <p>My Html Is:</p>
  
  <pre><code>&lt;div data-role="fieldcontain"&gt;
                  &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
                      &lt;legend&gt;Layout view:&lt;/legend&gt;
                            &lt;input type="radio" name="radio-choice" id="radio-choice-c" value="on" checked="checked" /&gt;
                            &lt;label for="radio-choice-c"&gt;List&lt;/label&gt;
                            &lt;input type="radio" name="radio-choice" id="radio-choice-d" value="off" /&gt;
                            &lt;label for="radio-choice-d"&gt;Grid&lt;/label&gt;
                            &lt;input type="radio" name="radio-choice" id="radio-choice-e" value="other" /&gt;
                            &lt;label for="radio-choice-e"&gt;Gallery&lt;/label&gt;
                              &lt;/fieldset&gt;
             &lt;/div&gt;
  
  &lt;div data-role="fieldcontain"&gt;
          &lt;label for="slider"&gt;Room:&lt;/label&gt;
          &lt;input type="range" name="slider" id="slider" value="--------" min=? max=? data-highlight="true"  /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What do you think the min and max code should be? and
  How can I change the input values from A1 to A50?</p>