Membuat Nilai Pada Range Menggunakan Javascript

Hallo teman-teman Dumet School. Kembali lagi dengan saya di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Nilai Pada Range Menggunakan Javascript. Dimana ketika kita scroll ke kiri atau ke kanan nilai akan berubah sesuai nilai yang kita berikan pada range.

Langkah pertama untuk Membuat Nilai Pada Range Menggunakan Javascript adalah membuat struktur htmlnya terlebih dahulu. Dan berikut scriptnya ya teman-teman.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Membuat Nilai Pada Range Menggunakan Javascript</title>
</head>
<body>
    <div class="container">
        <h1>Membuat Nilai Pada Range Menggunakan Javascript</h1>
        <p>Jika range di scroll ke kiri atau ke kanan maka nilainya akan berubah</p>
        <div class="slidecontainer">
          <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          <p>Value: <span id="demo"></span></p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Membuat Nilai Pada Range Menggunakan Javascript</title>

</head>

<body>

<h1>Membuat Nilai Pada Range Menggunakan Javascript</h1>

<p>Jika range di scroll ke kiri atau ke kanan maka nilainya akan berubah</p>

<p>Value: <span id="demo"></span></p>

</div>

</body>

</html>

Teman-teman bisa perhatikan pada script di atas dimana nilai min dan max adalah nilai yang bisa kita atur sesuai kebutuhan. Jika sudah selesai maka kita bisa langsung berikan style cssnya dan berikut scriptnya.

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .container{
        margin: auto;
        width: 500px; 
        background: salmon;
        padding: 10px;
        text-align: center;
    }
    .slidecontainer {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }
</style>

<style>

padding: 0;

margin: 0;

}

.container{

margin: auto;

width: 500px;

background: salmon;

padding: 10px;

text-align: center;

}

.slidecontainer {

width: 100%;

}

.slider {

-webkit-appearance: none;

width: 100%;

height: 25px;

background: #d3d3d3;

outline: none;

opacity: 0.7;

-webkit-transition: .2s;

transition: opacity .2s;

}

.slider:hover {

opacity: 1;

}

.slider::-webkit-slider-thumb {

-webkit-appearance: none;

appearance: none;

width: 25px;

height: 25px;

background: #4CAF50;

cursor: pointer;

}

.slider::-moz-range-thumb {

width: 25px;

height: 25px;

background: #4CAF50;

cursor: pointer;

}

</style>

Dan langkah terakhir untuk Membuat Nilai Pada Range Menggunakan Javascript adalah kita buat javascriptnya. Dimana nantinya script ini yang akan mencetak nilai dari range tersebut.

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {

output.innerHTML = this.value;

}

</script>

Jika sudah selesai jangan lupa di simpan dengan format html dan jika teman-teman buka di browser masing-masing maka tampilannya akan tampak seperti pada gambar di bawah ini.

Jika di scroll ke arah kiri maka nilai range akan mendekati angka satu.

Dan jika di scroll ke arah kanan maka nilai range akan mendekati angka 100.

Demikian artikel tentang Membuat Nilai Pada Range Menggunakan Javascript. Semoga bermanfaat dan selamat mencoba ya teman-teman.

Membuat Nilai Pada Range Menggunakan Javascript

Facebook DUMET School

Categories