Mesuti

Сохраняет в localstorage все input при их изменении
При загрузке страницы, указывает все сохраненные данные в каждый input
Ищет каждый input по dishIdQuantityMap[x]
https://codepen.io/vaniljs/pen/GROmOJX

<script defer ...

Потому что одинарная обратная кавычка это синтаксис шаблона строк ES6
Все внутри приводится к строке string

Slider Syncing
https://kenwheeler.github.io/slick/

$(".test").click(function() {
    fadeFunc()
});

$(".test").click(fadeFunc());

function fadeFunc() {
    $(this).fadeTo( "slow", 0 );
}

ionden.com/a/plugins/ion.rangeSlider/demo.html
https://rangeslider.js.org/

React https://www.npmjs.com/package/rc-slider

Самый простой это первый вариант, черточки сделать кругами и поднять на уровень полосы.
Либо просто возьмите готовый шаблон, там много примеров
ionden.com/a/plugins/ion.rangeSlider/skins.html

(function (){
    let a = 75;
    let q = document.querySelector('.btn1');
    let b = document.querySelector('.out-1');
    let countWidth = b.style.width = 0;

    q.addEventListener('click', () =>{
        console.log(`${a += 10}`);
        b.style.width = `${countWidth += 5}px`;
    });
})();