Khái niệm
Price Range Input trong Javascript là chức năng tạo bộ lọc nhằm khoanh vùng tìm kiếm cho giá trị sản phẩm, được sử dụng rộng rải trong các trang web thương mại điện tử. Là một phần không thể thiếu trong các chức năng của bộ lọc.
Price Range Input gồm 2 giá trị:
- Min value: Giá trị tối thiểu.
- Max value: Giá trị tối đa.
Mặc định HTML cung cấp sẳn cho người dùng một input range tuy nhiên với range này chỉ có thể truyền một giá trị, vì vậy để có thể tạo ra chức năng Price Range Input ta cần sử dụng HTML CSS và Javascript.
Xây dựng Price Range Input
HTML
010.000
CSS
body{
background-color: #E5DED8;
}
.group{
background-color: #CBC2B9;
width: 300px;
margin: 100px auto;
height: 10px;
border-radius: 5px;
box-shadow: inset 0 1px 2px #9d968f;
position: relative;
}
.range-input input{
-webkit-appearance: none;
position: absolute;
width: 100%;
height: 5px;
margin: 0;
background-color: transparent;
transform: translateY(2px);
pointer-events: none;
}
.range-input input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 17px;
height: 17px;
background-color: #98C787;
border: 3px solid #cae08e;
border-radius: 50%;
box-shadow: inset 0 1px 2px #6f9163,
0 0 1px #6f9163;
pointer-events: auto;
}
.progress{
position: absolute;
height: 100%;
left: 0;
right: 0;
background-image: repeating-linear-gradient(
-45deg, #C7DB6B 0, #C7DB6B 3px,
#b7ca63 3px, #b7ca63 6px
);
border-radius: 5px;
background-attachment: fixed;
}
.range-text div{
position: absolute;
background-color: #6f9163;
color: #eee;
font-size: 7px;
padding: 5px;
left: 0;
width: 20px;
text-align: center;
border-radius: 3px;
top: 15px;
transform: translateX(-50%);
}
.range-text .text-max{
left: unset;
right: 0;
transform: translateX(50%);
}
Javascript
let rangeInput = document.querySelectorAll('.range-input input');
let rangeText = document.querySelectorAll('.range-text div');
let progress = document.querySelector('.progress');
let priceMax = rangeInput[0].max;
let priceGap = 1000;
rangeInput.forEach(input => {
input.addEventListener('input', (event) => {
let minVal = parseInt(rangeInput[0].value);
let maxVal = parseInt(rangeInput[1].value);
if(maxVal - minVal < priceGap){
if(event.target.className === 'range-min'){
minVal = rangeInput[0].value = maxVal - priceGap;
}else{
maxVal = rangeInput[1].value = minVal + priceGap;
}
}
let positionMin = (minVal / priceMax) * 100;
let positionMax = 100 - ((maxVal / priceMax) * 100);
progress.style.left = positionMin + '%';
progress.style.right = positionMax + '%';
rangeText[0].style.left = positionMin + '%';
rangeText[1].style.right = positionMax + '%';
rangeText[0].innerText = minVal.toLocaleString();
rangeText[1].innerText = maxVal.toLocaleString();
})
})
Đoạn code chức năng Price Range Input trong Javascript được mô tả như sau:
Với mỗi input range (bao gồm input range min và input range max) ta bắt sự kiện lắng nghe khi người dùng thay đổi giá trị với addEventListener('input'), khi này nó sẽ tiến hành chạy một function với event là toàn bộ nội dung của sự kiện đó.
Với progress là đường thằng màu xanh giao giửa hai điểm. Khi hai điểm thay đổi tính toán xem vị trí của hai điểm đó là bao nhiêu sau đó gán vào progress để thay đổi vị trí progress, với công thức: value = (value/ priceMax) * 100 (%).
RangeText là hai element được sử dụng để hiển thị giá trị của các đầu price range. Sử dụng innerText để gán giá trị của price range input vào các rangeText.