Compteur à pas réglable

LE HTML

Les pas sont des boutons à bascule : aria-pressed dit lequel est actif.

<div id="pas">
  <button data-p="1" aria-pressed="true">1</button>
  <button data-p="5" aria-pressed="false">5</button>
  <button data-p="10" aria-pressed="false">10</button>
</div>
<button id="moins">−</button> <output id="val">0</output> <button id="plus">+</button>

L'ÉTAT

let valeur = 0, pas = 1;
const MIN = -999, MAX = 999;

BORNER

Une seule fonction garde la valeur dans les limites, pour tous les boutons.

const borne = v => Math.min(MAX, Math.max(MIN, v));

CHOISIR UN PAS

function choisir(p) {
  pas = p;
  document.querySelectorAll('#pas button').forEach(b =>
    b.setAttribute('aria-pressed', String(Number(b.dataset.p) === p)));
}

AFFICHER

Les boutons se désactivent quand la borne est atteinte.

function afficher() {
  document.getElementById('val').textContent = valeur;
  document.getElementById('plus').disabled = valeur >= MAX;
  document.getElementById('moins').disabled = valeur <= MIN;
}

document.getElementById('plus').addEventListener('click', () => { valeur = borne(valeur + pas); afficher(); });
document.getElementById('moins').addEventListener('click', () => { valeur = borne(valeur - pas); afficher(); });