berjumpa kembali di tutorial tutorial pemrogramman website dumet school teman teman, tentunya desain yang menarik adalah salah satu cara agar membuat sebuah website kita menjadi keren dan tentunya membuat betah para pengunjungnya, nah kita juga mesti memperhatikan sekecil apapun desain dan seminimal mungkin kita buat menarik, contohnya ketika kita mmbuat range pada option form kita, nah kali ini kita akan belajar bagaimana Membuat Range Slider dengn JQuery. yuk kita praktekan teman teman
seperti biasa kita buat dulu file nay seperti berikut yah teman teman
di dalam file index.html ketikan struktur html berikut yah teman teman
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
<div class="range-slider">
<input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
<span class="range-slider__value">0</span>
</div>
<div class="range-slider">
<input class="range-slider__range" type="range" value="400" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
</body>
</html>
setelah itu jangan lupa sambung kan dengan JQuery dan main js nya yah teman teman
di style css nya ketikan kode berikut yah teman teman
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
@media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 60px 0 0 0%;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
nah di dalam mani js nya ketikan juga kode berikut yah teman teman
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
//jalankan fungsinya
rangeSlider();
nah coba kalian buka di webrowsernya
nah seperti itu cara .Membuat Range Slider dengn JQuery, semoga bermanfaat yah teman teman, dan selamat mencoba.
The post Membuat Range Slider dengn JQuery appeared first on Kursus Website Terbaik.