Custom step size averaged out across the slider?

[Overbord]

Hey man, love your slider it's gorgeous.

I have a range from 0 - 400.

I need five steps in that range - 1.5, 2, 6, 10, and 100.

The problem is that they're all mostly clustered down at the end of the slider, because there are so many low numbers. Is there a way to add custom steps wherever I like along the slider, so instead of looking like this:

0----------100---------200---------300---------400

It would look like:

0----1.5------2--------6-------10------100-----400

Is that doable?

[andreruffert]

Have a look at this codepen.
It describes an approach of value mapping. In your case this would look something like this:

<input type="range" min="0" max="6" step="1" value="0">

const valueMapping = [0, 1.5, 2, 6, 10, 100, 400]

[Overbord]

I can't seem to add any more than 12 steps, is there a limit @andreruffert ?

[andreruffert]

No, there is no limit.

[Overbord]

Okay, so for some reason my last step doesn't show up, and if I put extra steps in the middle, the corresponding number of steps get shunted off the end. Do you have any idea why that might be?

jQuery(function() {
  const $input = jQuery('input[type=range]');
  const $output = jQuery('output');
  const valueMapping = [
    'Please adjust the slider above',
    'up to: .53 Nm3/hr, 20 SCF/hr, 9.4 SLPM, 1.14 kg/24hr',
    'up to: 1.05 Nm3/hr, 40 SCF/hr, 18.8 SLPM, 2.27 kg/24hr',
    'up to: 2 Nm3/hr, 76 SCF/hr, 35.8 SLPM, 4.31 kg/24hr',
    'up to: 4 Nm3/hr, 152 SCF/hr, 71.7 SLPM, 8.63 kg/24hr',
    'up to: 6 Nm3/hr, 228 CF/hr, 107.6 SLPM, 12.94 kg/24hr',
    'up to: 10 Nm3/hr, 380 SCF/hr, 179.0 SLPM, 21.6 kg/24hr',
    'up to: 30 Nm3/hr, 1140 SCF/hr, 538.0 SLPM, 65.0 kg/24hr',
    'up to: 100 Nm3/hr, 3800 SCF/hr, 1790.0 SLPM, 216 kg/24hr',
    'up to: 200 Nm3/hr, 7600 SCF/hr, 3580.0 SLPM, 432 kg/24hr',
    'up to: 400 Nm3/hr, 15200 SCF/hr, 7160.0 SLPM, 864 kg/24hr',
    'Large scale (400+ Nm3/h)',
    'Other or unknown'
  ];
  
  function updateOutput(value) {
    $output[0].textContent = valueMapping[value - 1];  
  }
  
  $input.on('input', function(e) {
    updateOutput(e.target.value);
  });
  
  $input.rangeslider({
    polyfill: false
  });
  
  updateOutput($input[0].value);
});

[andreruffert]

The min, max & step attributes are crucial in this case e.g.

<input type="range" min="1" max="13" step="1">

The max attribute needs to be the length of the valueMapping.

[Overbord]

Yep, that's the ticket.