How to define custom animations for noUislider.js?

Question

I implemented the noUiSlider into my website which is just awesome.

1. However, I would like to define my own custom animations for the handlers/slider. Does anyone know which DOM elements I have to target in order to make the slider update aria and what is possible and what is not to avoid crushing the lib?

2. When I follow the documentation and set animation to true and alter the webkit-animation manually for .noUi-state-tap, .noUi-origin the animation doesn't take the time I set it to. I debugged it in the browser and it seems it doesn't apply the css-props, even though I highlighted them as !important. It just fires and animates the set function (upon button click) in a blink of an eye.

Any solution to this?

Slider

// javascript

function initialSlider() {

    clearInputs ();

    var slider = document.getElementById("slider");

    // Define values
    var initialPrice = 77.99;
    var maxRangeSlider = initialPrice * 4;
    var startBottomSlider = maxRangeSlider/4;
    var startInitialSlider = maxRangeSlider/4;
    var startTopSlider = maxRangeSlider/4;

    // Create slider itself

    noUiSlider.create(slider, {
        animate: true,
        animationDuration: 300,
        start: [startBottomSlider, startInitialSlider, startTopSlider],
        connect: [false, true, true, true],
        range: {
            'min': [0],
            '15%': [initialPrice * 0.85],
            '85%': [initialPrice * 1.15],
            'max': [maxRangeSlider]
        }
    });

    var connect = slider.querySelectorAll('.noUi-connect');
    var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color'];

    for (var i = 0; i < connect.length; i++) {
        connect[i].classList.add(classes[i]);
    }
[..]

// CSS

.noUi-state-tap, .noUi-origin {
    -webkit-transition-delay: 50ms !important;
    -webkit-transition-duration: 300ms !important;
}

// javascript set function trigger

const slider = document.getElementById("slider");
slider.noUiSlider.set([66.29, null, 89.69]);

Answer 1

Your styling .noUi-state-tap, .noUi-origin is targeting two selectors, .noUi-state-tap and .noUi-origin. Neither of those is specific enough to override the default styling. You should remove the comma (,), like so:

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s; // Change this to the desired duration
    transition: transform 0.3s;
}