Ragtime Kitty

Это происходит из-за того, что в Number() передается значение инпута, в котором есть запятая/пробел/другие символы (в зависимости от локали), которые данная регулярка не чистит.

input.addEventListener('input', function() {
  this.value = Number(this.value.replace(/\D/g,'')).toLocaleString('ru');
})

Типа вот так должно быть?

Можете на keydown изменить.

Можно рисовать обе картинки на канвасе. Тут только надо решить откуда берутся сами картинки.

Возможно:
afterfx -r -noui my_preset.jsx
-r для JS файлов
-s для инлайн JS

Можно через два keyframes, если не смущает анимация при загрузке.

SVG

Можно, например, вот так:

Вы имеете ввиду что-то типа такого?

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

Добавьте X и Y координатам по половинке пикселя и будут черные линии.

Через градиент вряд ли, можно нарисовать фон через SVG:

insertAdjacentHTML()
insertAdjacentElement()

Ползунок не отображается, потому что это максимальная длинна вашей композиции - 02:18
Измените длительность композиции:
Composition > Composition Settings (Композиция > Настройки композиции), или Ctrl+K. когда композиция выделенна в окне проекта или активна на таймлайне.

Ну или создайте новую, в которой укажите нужную длительность.

Можно делать через сложные формулы смешения цветов, но я не умею в математику и поэтому в вашем случае делала бы это через наложение начального и конечного цветов, а также анимацию уменьшения/увелечения прозрачности.

Опасити легко анимировать от 0 до 1, а визуально такой переход не отличается от стандартной анимации цвета в CSS: https://jsfiddle.net/ce4vno1g/

Достаточно будет менять прозрачность следующего/предыдущего фона в зависимости от прогресса перетаскивания + delay:

Есть еще такой вариант

Как вам подсказали в комментариях: перенесите сами инпуты в начало общей обертки и немного измените селекторы:


И в дальнейшем выкладывайте, пожалуйста, весь код в песочницу.