Membuat Range Slider dengn JQuery
berjumpa kembali di panduan panduan pemrogramman laman Source Code Aplikasi teman teman, pastinya desain yang menarik ialah diantara cara agar merancang sebuah laman kita menjadi keren dan pastinya merancang betah para pengunjungnya, nah kita pun mesti memperhatikan sekecil apapun desain dan seminimal mungkin kita bikin menarik, contohnya ketika kita mmbuat range di option form kita, nah kali ini kita akan belajar bagaimana Merancang Range Slider dengn JQuery. yuk kita praktekan teman teman
seperti lazimnya kita bikin dulu file nay seperti berikut yah teman teman
di pada 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 pada mani js nya ketikan pun 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 .Merancang Range Slider dengn JQuery, semoga bermanfaat yah teman teman, dan selamat mencoba.
Sumber https://kursuswebsite.org
