[kvizor34]

<div id="result"></div>
<div id="current"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var oldDelta = $(window).width() - 1440, oldSign = oldDelta / (Math.abs(oldDelta)|| 1), newDelta, newSign;
$(window).resize(function () {
        newDelta = $(window).width() - 1440, newSign = newDelta / (Math.abs(newDelta)||1);
        current.textContent = newDelta;
        if(oldSign != newSign){
            result.innerHTML += ((oldSign < 0)?"Bigger":"Less") + "<br>";
            oldSign = newSign;
        }
    })
</script>

Сложный вариант, но попробую если остальные не подойдут, спасибо.

@mediaquery проще ) https://www.w3schools.com/css/tryit....eries_fontsize

тогда обе разметки должны быть на странице, просто при одном размере показываем одну, при другом другую. или смиксовать что-то среднее )

Два одинаковых слайдера на странице, как вариант, но я не буду так засирать DOM.

window.matchMedia('(min-width: 1440px)').addListener(e=>console.log('отметка пройдена'));

Вот это варик) сейчас испробую, спасибо.