question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Better explanation of how density works in pips?

See original GitHub issue

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: screen shot 2015-08-13 at 8 26 36 pm

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

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
leongersencommented, Jan 12, 2018

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

1reaction
Ixalmidacommented, Apr 13, 2016

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: ','
                })
            }
        });
Read more comments on GitHub >

github_iconTop Results From Across the Web

Predicted Interval Plots (PIPS): A Graphical Tool for Data ...
In this article, we reaffirm the importance and usefulness of this innovative approach and introduce a graphical summary, predicted interval plots (PIPS), ...
Read more >
The Practice Integration Profile (PIP 2.0) a Tool to Measure ...
In this example, the idea is that “fully Integrated” practices have MORE integration than “collocated” practices. But does MORE integration mean ...
Read more >
Calculate Crude Oil Lot Size - How to Read Oil Pips?
A recent article showed how oil trading works and how to calculate gold pips. ... Its grade is light crude oil due to...
Read more >
PIP manual - WUR
As explained in section 1.1 the PIP approach aims “to build a solid foundation for sustainable change towards enhanced food production and good...
Read more >
PIPS II - Materials Characterization Facility
The precision ion polishing system (Gatan PIPS™) II is an Ar + ion mill system ... (DM) software for review and analysis while...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found