Better explanation of how density works in pips?

Hi there, I’m using your library which is great, but I’m trying to reduce the number of pips, and the denisty / scaling factor doesn’t seem to work intuitively. Can you help explain how it works? This is my code:

// Income slider
incomeSlider = document.getElementById('incomeSlider');
noUiSlider.create(incomeSlider, {
  start: CONST.defaultIncome,
  step: 1000, // Slider moves in increments
  connect: "lower",
  range: { // Slider can select range
    'min': 20000,
    'max': 150000
  },
  pips: { // Show a scale with the slider
    mode: 'steps',
    density: 50,     // <-- it doesn't seem to matter what this value is, nothing happens
    filter: function ( value, type ) {
      return ((value % 10000) ? 0 : 2);
    },
    format: {
      to: function ( value ) {
        return (value + "").slice(0, -3) + 'k';
      },
      from: function ( value ) {
        return value.replace('k', '000');
      }
    }
  }
});

And it ends up looking like this, with too many pips in between:

I’ve tried setting the density value to 0.5 all the way to 2000 and nothing seems to change.

[leongersen]

Added. Will be in the docs next time I push an update.

[Ixalmida]

Thanks for the info, airtonix!

Now if only there could be a split pip density to match the split numeric density. For example:

        // Range: $20,000 to $5,000,00 with midpoint at $150,000
        noUiSlider.create(slider, {
            range: {
                'min': [20000, 1000],    // Amount changes by $1,000 increments
                '50%': [150000, 10000],  // Amount changes by $10,000 increments
                'max': [5000000]
            },
            start: 50000,
            step: 1000,
            connect: 'lower',
            pips: {
                mode: 'range',
                density: [ 10, 3 ],    // ...or maybe: [ 'min': 10, '50%': 3]
                format: wNumb({
                    decimals: 0,
                    prefix: '$',
                    thousand: ','
                })
            }
        });