Dalam html, warna dapat ditulis dengan beberapa cara diantaranya adalah dengan menggunakan hex contohnya #ff00ff, menggunakan nama warna contohnya red dan terakhir menggunakan RGB misalnya rgb(100,100,100). Kali ini kita akan membuat waran dari halaman ini berbeda dan bermacam-macam.

Coba geser-geser slider berikut.

R
G
B

Table of Contents:

• Konsep
• Kode Sumber
  • HTML
  • Javascript
  • Hasil

Konsep

Rencananya kita akan membuat warna halaman di dalam web ini dapat diatur menggunakan slider. Masing-masing slider akan mewakili setiap komponen warna (merah,hijau,biru). Ketika salahsatu slider digeser, maka akan membuat warna pada body berubah.

Kode Sumber

HTML

Pertama kita perlu membuat sebuah slider, caranya yaitu dengan membuat elemen input dengan type range.

<input type="range">

Kita ingat bahwa nilai maksimal dari RGB adalah rgb(255,255,255) maka kita harus set nilai minimal dan maksimalnya.

<input type="range" min="1" max="255">

Tapi, kita butuh tidak hanya 1 buah, tetapi perlu 3 buah yaitu untuk komponen merah, hijau dan biru. Maka kita juga perlu memberi nama masing-masing elemen.

R <input type="range" name="merah" value="255" min="1" max="255"><br>
G <input type="range" name="hijau" value="255" min="1" max="255" ><br>
B <input type="range" name="biru"  value="255"  min="1" max="255"><br>

Javascript

Selanjutnya kita akan membuat kode javascript untuk mengatur agar semua dapat berjalan sesuai keinginan.

Pertama, kita harus panggil elemen-elemenya dengan memanggil semua elemen dengan type='range'.

const warna = document.querySelectorAll("input[type='range']");

Nah, sekarang kita buat agar jika masing-masing elemen diberi input (slider digeser) maka akan melakukan sebuah fungsi. Fungsinya yaitu mengambil setiap elemen dan mengambil nilainya kemudian nilai itu sebagai acuan warna pada background dari body.

warna.forEach(function(slider){
    slider.addEventListener("input",function(){
        const r = document.querySelector("input[name='merah']").value;
        const g = document.querySelector("input[name='hijau']").value;
        const b = document.querySelector("input[name='biru']").value;
        console.log(r,g,b);
        document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
    })
})

Hasil

Hasilnya, taraaaa………

R
G
B

Video

Untuk lebih jelas bisa lihat di channel youtube pak Sandhika Galih.

Link Video Disini