rango3.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Rango 3</title>
  5. function cambiarRango(input) {
  6. ////const output = input.nextSibling.nextSibling;
  7. const output = input.nextElementSibling;
  8. output.value = input.value;
  9. actualizarColor();
  10. }
  11. function actualizarColor() {
  12. const div = document.querySelector('#colores .color');
  13. const inputs = document.querySelectorAll('#colores input');
  14. const rojo = inputs[0].value;
  15. const verde = inputs[1].value;
  16. const azul = inputs[2].value;
  17. div.style.backgroundColor = `rgb(${rojo}, ${verde}, ${azul})`;
  18. }
  19. </script>
  20. #colores {
  21. display:grid;
  22. grid-template-columns:3em 300px 4em 150px;
  23. grid-gap:2em 0.5em;
  24. }
  25. #colores label {
  26. grid-column: 1 / 2;
  27. }
  28. #colores input {
  29. grid-column: 2 / 3;
  30. }
  31. #colores output {
  32. grid-column: 3 / 4;
  33. }
  34. #colores .color {
  35. background-color: black;
  36. grid-row: 1 / 4;
  37. grid-column: 4 / 5;
  38. }
  39. </style>
  40. </head>
  41. <h1>Rango 3</h1>
  42. <div id="colores">
  43. <label>Rojo</label>
  44. type="range"
  45. min="0" max="255" step="1"
  46. value="50"
  47. oninput="cambiarRango(this)"
  48. autocomplete="off" >
  49. <output>50</output>
  50.  
  51. <label>Verde</label>
  52. type="range"
  53. min="0" max="255" step="1"
  54. value="50"
  55. oninput="cambiarRango(this)"
  56. autocomplete="off" >
  57. <output>50</output>
  58.  
  59. <label>Azul</label>
  60. type="range"
  61. min="0" max="255" step="1"
  62. value="50"
  63. oninput="cambiarRango(this)"
  64. autocomplete="off" >
  65. <output>50</output>
  66.  
  67. <div class="color"></div>
  68. </div>
  69. </body>
  70. </html>

Proinf.net