Questions/Suggestions about Documentation

[adaminfinitum]

I've been going over the documentation in great detail. I did a lot of research to find a range/slider library that was well-documented, well-supported, widely used and had all the features I needed (I'm primarily working to improve the UI/UX of a web application with approximately 100 required questions, spread across 6 or 8 different forms/pages).

NoUISlider was the winner (due to robust features) and is quite well documented but I'm either not understanding some of what I'm reading or there are some errors (perhaps the docs haven't been updated?)...either way, some additional or updated documentation would be helpful.

For example: https://refreshless.com/nouislider/pips/#section-positions The first example shows code of:

var pipsPositions = document.getElementById('pips-positions');
noUiSlider.create(pipsPositions, {
    range: range_all_sliders,
    start: 0,
    pips: {
        mode: 'positions',
        values: [0, 25, 50, 75, 100],
        density: 4
    }
});

The second example (Stepped Positions) includes the following code:

var positionsStepped = document.getElementById('pips-positions-stepped');
noUiSlider.create(positionsStepped, {
    range: range_all_sliders,
    start: 0,
    pips: {
        mode: 'positions',
        values: [0, 25, 50, 75, 100],
        density: 4,
        stepped: true
    }
});

Both range sliders use a scale of 0-10,000 (for clarity, in that example and many others, it would be nice if the code specifying the min and max were included rather than implied but that was easy enough to figure out).

That said, the first example includes the following labels on pips: 0, 1813, 4000, 7000, 10000

The second example include these labels on pips: 0, 2000, 4000, 7000, 10000

Other than the bizarre variation of 1813 vs 2000 in labels between examples 1 and 2, I can't determine any other difference between the two examples.

Sure, example 2 includes the stepped property but I can't tell what it does, and I don't know why the labels are different between the two examples.

Further, wouldn't the code next to them indicate they should both have pips labeled "0, 2500, 5000, 7500, 10000" ?

While that's the example that I feel is clearest, there are a lot (dozens?) of code samples where I'm pretty sure options that are displayed in the live example (as opposed to the code) are simply implied and while most of it is clear, it's making it difficult for me yo understand how/why/if some things work.

I'm happy to help fix/update the docs...but I'm not sure if I understand them or am missing something (so I'm speculating they might be out of date).

Thanks for your hard work and sharing this with the world, it did everything I hoped in a proof of concept I created...now I'm down to the nitty gritty of implementation and coming across some difficulties that I can't imagine are specific to me or my situation.

Please advise.

Thanks, Adam

P.S. Just to be through, I just checked that the same issue existed in another browser (Google Chrome) and indeed it does and there is nothing that helps me make sense of it in Chrome Developer Tools either so some help making sense of it is much appreciated.

[leongersen]

Hi Adam, thank you for your detailed feedback, it is very helpful. There is definitely (always) room for improvement in the documentation, and the "pips" documentation is not the most extensive.

All code samples match the running code exactly (the documentation generates both from the same source).

To hopefully help clarify your confusion:

The positions mode places pips at exactly the provided positions (in percentages) on the slider. For the example, 25% is 1813 on the slider.

If stepped: true is set, the provided percentages are rounded to the nearest user-selectable step on the slider. As 25% is in the '10%': [500, 500] segment of the range, the step value that applies is 500, so the 1813 pip is rounded to the nearest step at 2000.

I'd be very open to improvements in the documentation. The pips docs are here:

https://github.com/leongersen/noUiSlider/blob/master/documentation/pips.php https://github.com/leongersen/noUiSlider/tree/master/documentation/pips

FYI, the density option is somewhat misnamed: the higher the density, the fewer pips are placed on the slider.

[adaminfinitum]

Thanks for getting back to me. The density documentation was straight-forward enough...the first time I read through it, I didn't fully understand it, but I had created a prototype/proof of concept static HTML page with links to the relevant libraries and created a working mock up to test everything.

I changed density: 1 to density: 10 and it became obvious how it worked (before settling on density: 50).

But, back to the "1813" question...so I assume that example is a non-linear scale (because 2500 would be 25% of 10000)?

And if the scale was set in such a way that 1813 was at 40%, then 25% would presumably be below 1750 and with steps of 500 and the stepped: true attribute set, it would then default to 1500? Am I understanding that correctly?

Hopefully, these questions kind of clarify some of what I was getting at because it's not just the pips.

A couple examples, that may seem petty but I certainly had to stop and do some research to figure out exactly what I needed to do:

From the index page of the Github Pages website: https://refreshless.com/nouislider/

I'd suggest updating it so it can be implemeted without editing (by editing, I mean removing the JS comment on the HTML). It might seem obvious, but I double checked if I should include the HTML in a JS comment (inside a ` Githubissues.

Githubissues is a development platform for aggregating issues.