Как связать события клика с движением скролла?

Я так понимаю, вам нужен слайдер
https://codesandbox.io/s/swiper-mousewheel-control...

https://swiperjs.com/swiper-api#methods-and-properties

Как добавить данные к началу графика?

Вроде пишут, что можно только заменить, т.е. setData
https://github.com/tradingview/lightweight-charts/...

Смещается слайдер при перелистывании, в чем причина?

Сейчас потестил - у меня все ок. Возможно зависит от экрана. Или может уже поправили?

Как делать изменения даже если кликаем не по кнопкам(а по треку)?

Как правильно вычислять значение?

Почему rotate 3d в React ведет себя так странно?

1. В вашем примере лучше не использовать useState, т.к. слишком часто запускается обновление компонента.
Используйте ref, в вашем примере нет смысла сохранять промежуточные состояние в state, меняйте стил по ref ссылке на прямую сразу.
2. Вычисления стилей для картинки взял с примера, который вы указали.

Посмотрите демо
https://codesandbox.io/s/strange-rgb-phz4w?file=/s...

Как правильно вычислять значение?

fantastikgodd, вы отлавливаете клики по
<div class="track"></div>
и просто меняете стили у элементов, не меняя никакого текста.

Вам нужно либо отлавливать клики по
<div class="track"></div>
и менять нужный текст.

Либо отлавливать изменения вашего:
<input type="range" />
и менять текст (что вроде у вас уже реализовано) и менять положение кастомного ползунка.
Сейчас никакие клики не доходят до вашего input, поэтому текст не меняется.

Как вывести корзину в нескольких местах на сайте?

Под корзиной имел в виду ваши виджеты с кол-вом товаров и общей суммы. Модалка с перечнем добавленных товаров остаётся одна