Steps question

Hi Léon!

Do you know a solution how I can fix this gap?

noUiSlider.create(pipsSlider, {
    range: {
        'min': [1,1],
        '40%': [7,1],
        '60%': [8,2],
        '80%': [16,4],
        'max': [32]
    },
    start: 0,
    connect: 'lower',
    tooltips: true,
    pips: {
        mode: 'values',
        values: [1,2,3,4,5,6,6,7,8,10,12,14,16,20,24,28,32],
        density: 4,
        stepped: true
    }
});

---

With another slider it works with the values and the steps without problems - what am I doing wrong with your range slider?

$(".js-range-slider").ionRangeSlider({
    grid: true,
    grid_num: 10,
    values: [1,2,3,4,5,6,6,7,8,10,12,14,16,20,24,28,32],
    from: 10,
    postfix: " GB",
});

[leongersen]

I’ve updated the documentation with a more straightforward approach to doing this. Thanks for reaching out!

https://refreshless.com/nouislider/examples/#section-values

[leongersen]

Yep, if you are generating the range, you’ll need to generate the percentages.

If you’d lead with that I’d probably have pitched a different approach (use a linear slider and map the output, see roughly this example).