<body>
<h1><span class="ez-toc-section" id="Custom_Range_Slider"></span>Custom Range Slider<span class="ez-toc-section-end"></span></h1>
<div class="range">
<div class="range-bar">
<span></span>
</div>
</div>
<script src="app.js"></script>
</body>
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
overflow: hidden;
font-family: sans-serif;
padding-top: 150px;
}
.range {
margin-top: 40px;
width: 600px;
height: 50px;
background-color: white;
border: 1px solid #aaa;
border-radius: 100px;
position: relative;
overflow: hidden;
cursor: e-resize;
}
.range-bar {
background-image: linear-gradient(to right, #bb69cc, #246bac);
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.range-bar span {
color: white;
font-size: 26px;
}
const body = document.querySelector('body')
const range = document.querySelector('.range')
const rangeBar = document.querySelector('.range-bar')
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> setRangeBar(percent) {
rangeBar.style.width = `${percent}%`
rangeBar.querySelector('span').innerText = `${percent}%`
body.style.backgroundColor = `rgba(0, 0, 0, ${percent / 100})`
}
setRangeBar(40)
range.addEventListener('mousemove', function (e) {
const process = e.pageX - <a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.offsetLeft
let percent = (process / this.offsetWidth) * 100
percent = <a href="https://nodemy.vn/cac-phuong-thuc-xu-ly-doi-tuong-math-trong-javascript-de-hieu-de-tiep-can-voi-nguoi-bat-dau-important/">Math</a>.ceil(percent)
setRangeBar(percent)
})
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
