title: Range Input with space to enter a value too
body: <p>thanks for the help right away!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  let rangeValueElement = document.querySelector('#range');
  let shippingValueElement = document.querySelector('#shipping');
  
  function calculateShipping(price) {
    const priceShippingRelation = {
      1: 43.51,
      2: 47.05,
      3: 50.61,
      4: 54.15,
      5: 57.71,
      6: 61.25,
      7: 64.81,
  8: 68.35,
  9: 71.91,
  10: 75.45,
  11: 79.31,
  12: 83.15,
  13: 87.01,
  14: 90.85,
  15: 94.71,
  16: 98.55,
  17: 102.41,
  18: 106.25,
  19: 110.11,
  20: 113.95,
  21: 117.81,
  22: 121.65,
  23: 125.51,
  24: 129.35,
  25: 133.21,
  26: 137.05,
  27: 140.91,
  28: 144.75,
  29: 148.61,
  30: 152.45,
  31: 158.31,
  32: 160.15,
  33: 164.01,
  34: 167.85,
  35: 171.71,
  36: 175.55,
  37: 179.41,
  38: 183.25,
  39: 187.11,
  40: 190.95,
    /* ... */
      42: 136,
    /* ... */
    65: 220
    };
  
    return priceShippingRelation[price];
  }
  
  document.querySelector('input#valR').addEventListener('change', showVal);
  
  function showVal() {
    rangeValueElement.innerText = this.value;
    shippingValueElement.innerText = 'Priority Mail (frete): $ ' + calculateShipping(this.value);
  }
  
  console.log(calculateShipping(3));
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="valR" max="65" min="1" step="1" type="range" value="1"&gt;
  
  &lt;span id="range" class="tesxss"&gt;1&lt;/span&gt;
  &lt;div class="tesxsss2"&gt;&lt;div id="taxa"&gt;Taxa FS Connect: $15.00&lt;/div&gt;
  &lt;div id="shipping"&gt;Priority Mail (frete): 43.51&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wish that in addition to the slider option, I could insert the number inside a box, so that it could be more direct.
  So besides the person doing the "thumb", she could enter a direct number as well.</p>
  
  <p>Another question is: besides normal shipping, there will be two more options. I need to insert two more options, I tried to put more categories, but I could not.
  Because the shippings work as follows:
  Bronze Shipping: 1-65 lbs
  Silver Shipping: 1-10 lbs
  Gold Shipping: 1-4 lbs</p>
  
  <p>So if the person entered 3 lbs, there were 3 shipping options, or if they put 55 lbs, only the Bronze Shipping option would appear.</p>
  
  <p>If a button is needed to confirm the values ​​for the shipping options, that's OK!</p>
  
  <p>Thanks for everyone's help, I've tried a lot of topics, but I can not do it the way I need it.</p>