//selecciono el input number por el id
input = document.getElementById('miNumero');
//escucho el evento keyup
input.addEventListener('keyup', validar);
//funcion donde valido mi lógica
function validar(event){
//si el valor es 0
if(this.value == 0){
input.style.backgroundColor = "green";
//si el valor es entre 1 a 10
}else if( this.value > 0 && this.value < 11){
input.style.backgroundColor = "red";
//si el valor es mayor a 30
}else if(this.value >30){
input.style.backgroundColor = "green";
//si el valor es negativo
}else if(this.value <0){
input.style.backgroundColor = "purple";
}
}//end function validar
<input type="number" id="miNumero" name="miNumero">
Explicación
Lo primero que debes hacer es obtener el input
en este caso uso el ID
para identificarlo.
Ahora con esto debes escuchar el evento keyup
para saber que teclas presiona y obtener dicho valor y realizar tu lógica deseada, en este caso invoco a una función validar
.
Esta función valida mediante if
las condiciones que necesito y mediante:
input.style.backgroundColor = "green";
defino un color de fondo backgroundcolor
deseado para cada condición.
para mayor detalle sobre el evento keyup te sugiero revisar: KeyUp