Day 12 | Demo Custom Range Slider

Sử dụng HTML , CSS, JS  thiết kế chức năng Range Slider

 
 
				
					  <body>
    <h1>Custom Range Slider</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')

function 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 - this.offsetLeft
	let percent = (process / this.offsetWidth) * 100

	percent = Math.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 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *