Hello everyone, I will give you all free code, about learning "Animated Slider Using HTML CSS and Javascript". Good luck, don't forget to keep learning and repeat until you can, happy coding and Spirit on.
This is the code HTML, JAVASCRIPT and CSS you need learn :
1. HTML & JAVASCRIPT
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Slider I Yaya WD</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="range">
<div class="sliderValue">
<span>100</span>
</div>
<div class="field">
<div class="value left">0</div>
<input type="range" min="0"
max="200" value="100" steps="1">
<div class="value right">200</div>
</div>
</div>
<script>
const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.center = (value/2) + "%";
slideValue.classList.add("show");
});
inputSlider.onblur = (()=>{
slideValue.classList.remove("show");
});
</script>
</body>
</html>
2. CSS
@import url('https://fonts.googleapis.com/css?family=
Montserrat400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'montserrat', sans-serif;
}
html,body{
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #9ED5C5;
}
.range{
height: 60px;
width: 360px;
background: #fff;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
.sliderValue{
position: relative;
width: 100%;
}
.sliderValue span{
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -50px;
line-height: 55px;
z-index: 2;
color: #00a8a8;
font-size: 30px;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.sliderValue span.show{
transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
position: absolute;
content: '';
background: #00a8a8;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
}
.field{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value{
position: absolute;
font-size: 18px;
color: #00a8a8;
font-weight: 600;
}
.field .value.left{
left: -22px;
}
.field .value.right{
right: -43px;
}
.range input{
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #00a8a8;
cursor: pointer;
}
.range input::-moz-range-thumb{
-webkit-appearance: none;
border-radius: 50%;
cursor: pointer;
}
.range input::-moz-range-progress{
background: #664AFF;
}
For more details, you can see the link YouTube below :
Click link Channel below :
Support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Belum ada tanggapan untuk "Animated Slider Using HTML CSS and Javascript"
Post a Comment