title: Javascript: Non Linear Range Slider
body: <p>I have built this range slider, but would like to make it behave differently. I want to know if it is possible to make the value of the slider handle be 1,000 when it gets to the center of the slider, and when at the right end it should be 10,000.</p>
  
  <p>Below is the code I have so far:</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>$('input[type="range"]').rangeslider({
      polyfill: false,
      onSlide: function (pos, val) {
        $('input[type="text"]').val(val)
      },
      onSlideEnd: function(position, value) {
        
        const sliderValue = value;
        
        if (value &gt;= 1000) {
          const upperLimit = Math.ceil(value/100) * 100
          const lowerLimit = Math.floor(value/100) * 100
          
          const upperWeight = Math.abs( upperLimit - value)
          const lowerWeight = Math.abs( value - lowerLimit)
          
          value = upperLimit
          
          if (upperWeight &gt; lowerWeight) {
            value = lowerLimit
          }
        }
        
        if (value &gt;= 10000) {
          value = 10000
        }
        
          $('input[type="range"]').val(value).change()
      },
  });
  
  
  $('input[type="text"]').on('blur', function (e) {
    $('input[type="range"]').val($(this).val()).change()
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  
  .container {
    width: 80%;
    margin: 10px auto;
    
   
  }
  
   input[type="text"] {
     margin-top: 50px;
     display: block;
     width: 100%;
     height: 60px;
     border: 1px solid #EBEBEB;
     border-radius: 5px;
     font-size: 25px;
     color: #444;
     padding: 5px  25px;
     outline: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;input
        type="range"
        min="100"            
        max="10000"          
        step="10"           
        value="1000"
    /&gt;
    
    &lt;input type="text"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The below image shows an illustration of what I am trying to achieve.</p>
  
  <p><a href="https://i.stack.imgur.com/2a9x0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2a9x0.png" alt="enter image description here"></a></p>