rango2.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Rango 2</title>
  5. function cambiarRango(input) {
  6. ////const output = input.nextSibling.nextSibling;
  7. const output = input.nextElementSibling;
  8. output.value = input.value;
  9. }
  10. </script>
  11. p {
  12. display:grid;
  13. grid-template-columns:3em 300px 4em;
  14. }
  15. </style>
  16. </head>
  17. <h1>Rango 2</h1>
  18. <p>
  19. <label>Rojo</label>
  20. type="range"
  21. min="0" max="255" step="1"
  22. value="50"
  23. oninput="cambiarRango(this)"
  24. autocomplete="off" >
  25. <output>50</output>
  26. </p>
  27. <p>
  28. <label>Verde</label>
  29. type="range"
  30. min="0" max="255" step="1"
  31. value="50"
  32. oninput="cambiarRango(this)"
  33. autocomplete="off" >
  34. <output>50</output>
  35. </p>
  36. <p>
  37. <label>Azul</label>
  38. type="range"
  39. min="0" max="255" step="1"
  40. value="50"
  41. oninput="cambiarRango(this)"
  42. autocomplete="off" >
  43. <output>50</output>
  44. </p>
  45. </body>
  46. </html>

Proinf.net