viewof riduzione = { // Limiti del range const MIN_VALUE = 4; const MAX_VALUE = getProduction_byID(attuale).primi.grandezza_organico; // 1. Inizializzazione dello stato const riduzioneprevista = Number(getProduction_byID(attuale).primi.organico_riduzione_1) let valore = riduzioneprevista !== 0 ? riduzioneprevista : MAX_VALUE; // 2. Creazione degli elementi HTML const div = html`

`; // Riferimenti agli elementi chiave const input = div.querySelector('input'); const btnMeno = div.querySelector('[name="meno"]'); const btnPiu = div.querySelector('[name="piu"]'); // 3. Funzione di aggiornamento dello stato e notifica a Observable const update = (newValue) => { // 3a. Applicazione dei limiti: il valore deve essere compreso tra MIN e MAX const boundedValue = Math.min(Math.max(newValue, MIN_VALUE), MAX_VALUE); // Aggiorna la variabile di stato interna valore = boundedValue; // 3b. Gestione dell'abilitazione/disabilitazione dei pulsanti btnMeno.disabled = (valore <= MIN_VALUE); btnPiu.disabled = (valore >= MAX_VALUE); // Aggiorna l'input visivo input.value = valore; // Notifica a Observable div.value = valore; div.dispatchEvent(new CustomEvent('input')); }; // Imposta lo stato iniziale dei pulsanti al caricamento btnMeno.disabled = (valore <= MIN_VALUE); // 4. Gestione degli eventi sui pulsanti (con check dei limiti) btnPiu.onclick = () => { // Incrementa solo se non ha raggiunto il limite massimo if (valore < MAX_VALUE) { update(valore + 2); } }; btnMeno.onclick = () => { // Decrementa solo se non ha raggiunto il limite minimo if (valore > MIN_VALUE) { update(valore - 2); } }; // 5. Gestione dell'input manuale (aggiornamento quando l'utente digita) input.oninput = () => { const newValue = parseInt(input.value); // L'uso di update() qui gestisce automaticamente il range grazie a Math.min/max if (!isNaN(newValue)) { update(newValue); } }; // 6. Imposta il valore iniziale dell'elemento div div.value = valore; // 7. Restituisce l'elemento div return div; } /* //se non c'è organicoridotto mette 2 viewof riduzione = Inputs.range([4,getProduction_byID(attuale).primi.grandezza_organico], {label: "Riduzione", step: 2, value: Number(getProduction_byID(attuale).primi.organico_riduzione_1.toString().replace(/\b0\b/g, getProduction_byID(attuale).primi.grandezza_organico))}) */