Как переопределить nouislider классы?

Question

[spasatelev]

Доброго времени суток! Возник вопрос, как перезаписать стандартный класс и добавить свой. В офф. документации не нашел примеров. Объясните, пожалуйста кто знаком с таким)

noUiSlider.create(slider, {
    start: 80,
    range: {
        min: 0,
        max: 100
    },
    cssPrefix: 'noUi-', // defaults to 'noUi-',
    cssClasses: {
        // Full list of class names to override.
        // Does NOT extend the default classes.
        // The first class in String gets prefixed, the rest gets added as it is
    }
});

Answer 1

[Pashok Doom]

var cssClasses = {
        target: "target",
        base: "base",
        origin: "origin",
        handle: "handle",
        handleLower: "handle-lower",
        handleUpper: "handle-upper",
        touchArea: "touch-area",
        horizontal: "horizontal",
        vertical: "vertical",
        background: "background",
        connect: "connect",
        connects: "connects",
        ltr: "ltr",
        rtl: "rtl",
        textDirectionLtr: "txt-dir-ltr",
        textDirectionRtl: "txt-dir-rtl",
        draggable: "draggable",
        drag: "state-drag",
        tap: "state-tap",
        active: "active",
        tooltip: "tooltip",
        pips: "pips",
        pipsHorizontal: "pips-horizontal",
        pipsVertical: "pips-vertical",
        marker: "marker",
        markerHorizontal: "marker-horizontal",
        markerVertical: "marker-vertical",
        markerNormal: "marker-normal",
        markerLarge: "marker-large",
        markerSub: "marker-sub",
        value: "value",
        valueHorizontal: "value-horizontal",
        valueVertical: "value-vertical",
        valueNormal: "value-normal",
        valueLarge: "value-large",
        valueSub: "value-sub"
    };

Кусок из кода скрипта. Перепиши под нужды, с учётом префикса.

Comments

[spasatelev]

А вот как стилизовать touchArea, или handle - сами ползунки, когда добавляю класс у меня слайдер вообще пропадает.

noUiSlider.create(asideRange, {
        connect: true,
        
        start: [500, 4000],
        range: {
            'min': [0],
            '10%': [500, 500],
            '50%': [4000, 1000],
            'max': [10000]
        },
        cssPrefix: 'noUi-', // defaults to 'noUi-',
        // cssClasses: {
        //     handle: 'custom-handle',
        // }
    });

[Pashok Doom]

spasatelev, скопируй дефолтные стили нужных элементов в свой новый класс и потом уже настраивай

[spasatelev]

Pashok Doom, Т.е я прописываю в cssClasses, например handle: "handle", а потом уже в css шаманить? Так я хочу свой класс задать, чтобы его конкретно отстилить. А в классе прописать уже свой отстиленный ползунок

[Pashok Doom]

spasatelev, https://jsfiddle.net/qpgv86bc/

[spasatelev]

Pashok Doom, Это столько всего прописывать ради кастомизации одного слайдера на js?) Спасибо за помощь. Осталось поковыряться

[Pashok Doom]

spasatelev, ну я так понял, он сразу все классы сбрасывает, поэтому всё прописывать не надо, а только те элементы, что точно будут использоваться с нужными конфигурациями

[spasatelev]

Pashok Doom, Понятно теперь, а черную обводку какой класс задает?

[Pashok Doom]

spasatelev, target