Check out The tutorial on my YouTube channel and do subscribe to support. Thanks!
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Custom Range Slider using HTML, CSS & JS| CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
display:flex;
height:100vh;
justify-content:center;
align-items:center;
font-family:poppins;
background-color:royalblue;
}
.container{
background-color:white;
padding:32px;
width:350px;
border-radius:10px;
box-shadow:rgba(0,0,0,0.35) 0px 5px 15px;
}
.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:royalblue;
cursor:pointer;
}
.slider::-moz-range-thumb{
width:25px;
height:25px;
border-radius:50%;
background:royalblue;
cursor:pointer;
}
</style>
<body>
<div class="container">
<div class="slidecontainer">
<input type="range" min="1" max="100" class="slider" id="myRange" value="50">
<p>Value: <span id="demo"></span></p>
</div>
</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>
Post a Comment