Как сделать ползунок со значениями?

Question

[Владимир]

Доброго времени суток! Мне нужно получить вот такое на выходе:

Самая подходящая библиотека которую нашёл это Soft limits в самом низу.
Вот такой код у меня:

var bigValueSlider = document.getElementById('slider-huge');
var bigValueSpan = document.getElementById('huge-value');

noUiSlider.create(bigValueSlider, {
    start: 2,
    step: 2,
    format: wNumb({
        decimals: 2
    }),
    range: {
        min: 2,
        max: 32
    },
    pips: { // Show a scale with the slider
        mode: 'steps',
        stepped: true,
        density: 4
    }
});

Там получается если поставить 2 минимум а 32 максимум и в два шага, то оно его разбивает на два до 32, а у меня после 32 идут разные значения.
Подскажите как такое можно реализовать? Заранее спасибо!

Answer 1

[Артём]

Чуть выше на страничке если подняться, то можно увидеть раздел Non linear slider.
И есть отдельный Scale/Pips.

Comments

[Владимир]

Артём я что то его не увидел, да и с англ у меня не 100%. Буду пробовать, спасибо за подсказку! Как получится отмечу ваш ответ решением)

Answer 2

[Константин Величко]

Попробуйте Ion.RangeSlider наиболее гибкая и настраиваемая из всех. И документация человеческая не то что у nouislider

Comments

[Владимир]

Константин Величко тоже хороший вариант, спасибо Вам за помощь)