Почему этот блок кода все время выдает null ?

Как вариант, элемент с таким тегом не существует (<slider>).

Возможно, вы хотите обратиться к элементу по классу, тогда нужно так

 let D = document.querySelector(".slider"); 

Потому что такого селектора нет. Может быть либо #slider, либо .slider. Но и этого мало, нужна проверка, что компонент смонтирован на этот момент

Потому что нет такого селектора "slider". А если использовать React, то использовать его по-полной и для ссылки на компонент импортировать хук useRef, а не через нативный js

такой вызов функции всегда будет возвращать null, ведь ты передал некорректный селектор

Если используешь реакт, забудь про querySelector.
Повесь на тег ref, и лучше смени слайдер, если он не адаптирован под реакт полностью. Keen-slider, например.

document.querySelector выбирает элемент HTML по его названию/класса/ID или комбинаций селекторов, и возвращает ео в качестве объекта, в случае отсутствия элемента в структуре документа querySelector возвращает null.

При использовании querySelector для выборки элемента нужно использовать именно синтаксис селектора, это тоже самое что и в CSS, например есть селектор тега это body, p, blockquote, img и т.д. само название тега является селектором, чтобы выбрать элемент по классу используется точка пример .slider выберет элемент с классом slider, чтобы выбрать элемент по ID используется решетка # пример #slider

В твоем случае ты пытаешься выбрать элемент с названием slider который в принципе даже не существует в стандарте HTML, это одна из причин по которой может получиться результат null.

Если нужно выбрать элемент с ID используй синтаксис селектора ID такой же как в CSS #slider, если бы ты использовал просто getElementById то # можно было бы не писать.

Другая причина по которой может получиться null это рассположение кода, обычно весь скрипт который обрабатывает HTML расспологают в конце перед </body> либо используют атрибуты async/defer или используется событие DOMContentLoaded.