Cara Membuat Range Slider

Di bawah ini kita akan mempelajari cara membuat range slider kustom dengan CSS dan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#slidecontainer {
  width:100%;
}
.slider-color {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity:0.7;
  -webkit-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
}
.slider-color:hover {
  opacity:1;
}
.slider-color::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #006400;
  cursor: pointer;
}
.slider-color::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  background: #006400;
  cursor: pointer;
}

.slider-pic {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity:0.7;
  -webkit-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
}
.slider-pic:hover {
  opacity:1;
}
.slider-pic::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: url('https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png');
  cursor: pointer;
}
.slider-pic::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  background: url('https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png');
  cursor: pointer;
}

.slider-square {
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  background: #d3d3d3;
  outline: none;
  opacity:0.7;
  -webkit-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
}
.slider-square:hover {
  opacity:1;
}
.slider-square::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #D2691E;
  cursor: pointer;
}
.slider-square::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  background: #D2691E;
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Contoh Custom Range Slider</h1>

<div id="slidecontainer">
<h4>Default:</h4>

  <input type="range" min="1" max="100" value="50">

<h4>Square:</h4>
<p><input type="range" min="1" max="100" value="50" class="slider-square" id="id2"></p>

<h4>Round:</h4>
<p><input type="range" min="1" max="100" value="50" class="slider-color" id="id1"></p>

<h4>Image:</h4> 
<p style="margin-bottom:20px"><input type="range" min="1" max="100" value="50" class="slider-pic" id="id3"></p>
  
<span>Value:</span> <span id="f" style="font-weight:bold;color:gold"></span>
  <script>
var slideCol = document.getElementById("id1");
var slideSq = document.getElementById("id2");
var slidePic = document.getElementById("id3");
var y = document.getElementById("f");
y.innerHTML = slideCol.value;

slideCol.oninput = function() {
    y.innerHTML = this.value;
}

slideSq.oninput = function() {
    y.innerHTML = this.value;
}

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

</div>

</body>
</html>

Section Artikel

1 Membuat Custom Range Slider Default
2 Round Slider
3 Slider Ikon / Gambar

Membuat Custom Range Slider Default

Langkah 1) Tambahkan HTML:
Contoh

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

Langkah 2) Tambahkan CSS:
Contoh

.slidecontainer {
  width: 100%; /* Lebar container yang di luar */
}

/* slider */
.slider {
  -webkit-appearance: none;  /* Ganti gaya CSS default */
  appearance: none;
  width: 100%; /* lebar maksimum */
  height: 25px; /* Tinggi yang ditentukan */
  background: #d3d3d3; /* warna background grey  */
  outline: none; /* Hapus outline */
  opacity: 0.7; /* Setel transparansi (untuk efek mouse-over pada hover) */
  -webkit-transition: .2s; /* Transisi 0,2 detik saat mengarahkan kursor */
  transition: opacity .2s;
}

/* Efek mouse-over */
.slider:hover {
  opacity: 1; /* Sepenuhnya ditampilkan saat mouse-over */
}

/* handle slider (gunakan -webkit- (Chrome, Opera, Safari, Edge) dan -moz- (Firefox) untuk mengganti tampilan default) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Ganti tampilan default */
  appearance: none;
  width: 25px; /* Tetapkan lebar handle slider tertentu */
  height: 25px; /* Tinggi handle slider*/
  background: #4CAF50; /* Warna background hijau   */
  cursor: pointer; /* Kursor saat hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Tetapkan lebar handle slider tertentu */
  height: 25px; /* Tinggi handle slider */
  background: #4CAF50; /* Warna background green  */
  cursor: pointer; /* Kursor saat hover */
}

Langkah 3) Tambahkan JavaScript:
Buat range slider dinamis untuk menampilkan nilai saat ini, dengan JavaScript:
Contoh

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Menampilkan nilai slider default

// Perbarui nilai slider saat ini (setiap kali  menyeret handle slider)
slider.oninput = function() {
  output.innerHTML = this.value;
}

Round Slider

Untuk membuat handle round slider, gunakan properti border-radius. Tip: Setel tinggi slider ke nilai yang berbeda dari thumbs slider jika menginginkan ketinggian yang tidak sama (15px vs. 25px dalam contoh ini):
Contoh

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

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

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

Jadi seperti ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  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;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

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

<h1>Contoh Round Range Slider</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

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

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

</body>
</html>

Slider Ikon / Gambar

Untuk membua handle slider t ikon / gambar , gunakan properti background dan masukkan url gambar:
Contoh

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png');
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 25px;
  border: 0;
  background: url('https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png');
  cursor: pointer;
}

Jadi seperti ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  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: 23px;
  height: 24px;
  border: 0;
  background: url('https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png');
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
  background: url('https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png');
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Contoh Range Slider ikon atau gambar</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

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

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

</body>
</html>

How To slider

Cara Membuat Range Slider

Membuat Custom Range Slider Default

Round Slider

Slider Ikon / Gambar

Cara Membuat Skill Bar

Cara Membuat Tooltip

You may also like