Barra de selección en un servidor web ESP32

En HTML el elemento input type="range" permite incluir una barra de selección en el contenido de una página web.

El siguiente código muestra una barra de selección y un botón tipo submit.

<form action="#">

      Seleccione una temperatura:

      <input type="range" id="temperatura" min="0" max="100">

      <br>

      <input type="submit" value="Confirmar">

</form>

En la pantalla del navegador se ve algo así: 

Con el ratón podemos desplazar la barra de selección pero el botón no proporciona ninguna funcionalidad, pero al pulsar sobre él se muestra lo siguiente en la pantalla.

El siguiente código muestra el valor seleccionado en la barra en el extremo derecho de la misma.

<form action="#">       

Seleccione una temperatura:       

<input type="range" id="temperatura" min="0" max="100">       

<span id="temp">0</span>       <br>       

<input type="submit" value="Confirmar">   </form>   

<script>   

addEventListener('load',inicio,false);    

function inicio()   {    document.getElementById('temperatura').addEventListener('change',cambioTemperatura,false);   } 

function cambioTemperatura()   {        document.getElementById('temp').innerHTML=document.getElementById('temperatura').value;   } 

</script>

En la pantalla del navegador se ve algo así: 

El botón continúa sin añadir ninguna operatividad.

El siguiente código ya añade funcionalidad al botón, que vamos a aprovechar para indicar al ESP32 los valores RGB para encender un led.

<form action="#">       Seleccione el color:              <br> <br>          

Rojo:   <br>       

<input type="range" id="rojo" name="rojo"  min="0" max="255" step="1" value="0">  

<span id="rojo1">0</span>      <br>   

Verde:  <br>       

<input type="range" id="verde"  name="verde"  min="0" max="255" value="0">    

<span id="verde1">0</span>     <br>       

Azul:         <br>       

<input type="range" id="azul"  name="azul"  min="0" max="255" value="0">   

<span id="azul1">0</span>       <br>       

<input type="submit" value="Confirmar">   </form>   

<script>   

addEventListener('load',inicio,false);    

function inicio()   {     document.getElementById('azul').addEventListener('change',cambioAzul,false);   }    

function cambioAzul()   {         document.getElementById('azul1').innerHTML=document.getElementById('azul').value;   } 

 addEventListener('load',inicio1,false);    

function inicio1()   {     document.getElementById('verde').addEventListener('change',cambioVerde,false);   }    

function cambioVerde()   {         document.getElementById('verde1').innerHTML=document.getElementById('verde').value;   } 

addEventListener('load',inicio2,false);    

function inicio2()   {     document.getElementById('rojo').addEventListener('change',cambioRojo,false);   }    

function cambioRojo()   {         document.getElementById('rojo1').innerHTML=document.getElementById('rojo').value;   } 

</script>

Este código está introducido en un bloque de texto en el programa de STEAMakersBlocks.

En la pantalla del navegador se ve algo así: 

Podemos seleccionar con el ratón los valores de los diferentes colores base en las barras de selección.

Al presionar el botón se ponen a cero estas barras de selección pero le enviamos al servidor web la petición que hará que se encienda el led RGB con los valores seleccionados.

Ahora vamos a introducir los valores de las variables verde, rojo y azul del código HTML mediante los bloques correspondientes del STEAMakersBlocks.

De esta forma se nos mantienen las posiciones de las barras de selección una vez pulsado el botón, aunque no nos muestre el valor a su extremo.