Steps question

[HerrSammyDE]

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]

Hi! The issue is in your range. You've set 7 to be at 40%, and 8 to be at 60%. That spacing is wider than the other values in your range.

[HerrSammyDE]

Hi! The issue is in your range. You've set 7 to be at 40%, and 8 to be at 60%. That spacing is wider than the other values in your range.

Means I have to set 41%? Is there also a way to do it without the range, like in my 2nd example? (ionRangeSlider) That would be a lot easier.

[leongersen]

Means I have to set 41%?

No, you have to set the 40/60/80 percentages closer together. The pips values are reflecting what you've set your range to. The 7 is shown at 40% of the slider width, the 8 at 60% of the slider width. Since you want 16 "locations" on your slider (1,2,3,4,5,6,7,8,10,12,14,16,20,24,28,32), divide 100 by 16 to determine where you want the breaks.

Is there also a way to do it without the range

Yes, if you don't want to configure the increasing step values, you can set a linear range of {min: 1, max: 32}.

[HerrSammyDE]

Now I have made {min: 1, max: 32}, but now all steps like e.g. 13, 15 or also 31 are displayed, whereas I only want to have the numbers that come from the value.

[leongersen]

Here's how you'd do it with the steps configured:

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

[HerrSammyDE]

Thanks!

What if I had the values in a database, then I would have to calculate the percentages in addition or?

[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).

[HerrSammyDE]

Alright 👍 Thanks Léon!

[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

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.