masha_bunny

Это называется маска ввода. Вот здесь можно почитать как их создавать.

https://jsfiddle.net/Olegarh1a/qx75cpb8/

у меня получилось на flex сделать только так. хотелось бы узнать ваше мнение ?

Используйте window.removeEventListener('scroll', ...) в тот момент, когда поймали блок во вьюпорте.

https://jsfiddle.net/45k10Lbg/ так ?
https://jsfiddle.net/45k10Lbg/1/ или так

Вы имеете ввиду серый фон, или что бы картинка была преобразована из RGB в градации серого?

Если просто серый фон, то достаточно просто указать серый цвет
background: gray;
А если нужно чтобы картинка была преобразована из RGB в градации серого, то используйте фильтр
filter: grayscale(100%);
Установить прозрачность фоновой картинки можно используя псевдо-елемент и применяя к нему opacity
Пример:

'123 45'.replace(/\s/g, '')

А потому, что Вы используете jQuery, и сами запутались где какой код.

var countPlus = function(e) {
    var max = Number(slider.attr('max'));
    count++;
    if (count > max) {
      count = max;
    }
    // Или заменить инкремент и условие выше на это
    // count = Math.min(count + 1, max);
    slider.val(count);

    applyFill(slider[0]);
};

Дальше по аналогии.
По разделению: на обработчике input что-то написано, в функции applyFill - нет. А еще эту страшилку для разделения можно заменить на это (Для locale использовать ru-RU).

https://codepen.io/aliencash/pen/pojOoRp?editors=1100

с помощью псевдоэлемента и градиентной заливки

https://codepen.io/topicstarter/pen/OJyEdaN - крутите сколько угодно - если конечно так надо