title: Material-UI Slider - Changing Values using Scale
body: <p>I want to display a range on the slider from 1000 to 1M and add the following markers</p>
  
  <pre><code>const followersMarks = [
      {
        value: 1000,
        label: '1k',
      },
      {
        value: 5000,
        label: '5k',
      },
      {
        value: 10000,
        label: '10k',
      },
      {
        value: 25000,
        label: '25k',
      },
      {
        value: 50000,
        label: '50k',
      },
      {
        value: 100000,
        label: '100k',
      },
      {
        value: 250000,
        label: '250k',
      },
      {
        value: 500000,
        label: '500k',
      },
      {
        value: 1000000,
        label: '1M',
      },
    ];
  </code></pre>
  
  <p>Am adding it as follows</p>
  
  <pre><code>&lt;Form.Group controlId="formGridState"&gt;
                &lt;Form.Label className="mb-15"&gt;Followers Range&lt;/Form.Label&gt;
                &lt;Slider
                  value={followersRange}
                  onChange={handleChangeFollowersRange}
                  valueLabelDisplay="auto"
                  aria-labelledby="range-slider"
                  step="1000"
                  valueLabelDisplay="on"
                  marks={followersMarks}
                  min={1000}
                  max={1000000}
                /&gt;
              &lt;/Form.Group&gt;
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/D9Nlx.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/D9Nlx.jpg" alt="enter image description here"></a></p>
  
  <p><strong>What do I need?</strong></p>
  
  <p>Since at the start of the range I am displaying more markers the legibility and UX are bad. Is there a way to use <code>scale</code> to show the range in such way that it takes 50-60% of the space to show the first 25% of the values and then space out the rest?</p>