| Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo Thanh trượt phạm vi với các giá trị tối thiểu và tối đa. Chúng tôi sử dụng thanh trượt HTML, CSS và JavaScript trong phạm vi QUẢNG CÁO Show QUẢNG CÁO Thanh trượt được sử dụng trong nhiều giao diện người dùng vì nhiều lý do. Đó là một đầu vào lý tưởng để xác định phạm vi hoặc cường độ của giá trị, số lượng hoặc bất kỳ đặc điểm nào khác. Ví dụ. Phạm vi giá, tiền, trọng lượng, nhiệt độ, tần suất, v.v. Mã của Ankit Joshi Liên kết tải xuống dự án có sẵn bên dướiNgôn ngữ được sử dụngHTML, CSS và JavaScriptLiên kết ngoài / Phụ thuộcKhông phản hồiCÓBảng thanh trượt phạm viChơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây QUẢNG CÁO Để lấy đầu vào của người dùng từ thanh trượt của chúng tôi, chúng tôi sẽ sử dụng phần tử đầu vào phạm vi HTML. Trong HTML5, chúng ta có thể lấy một số loại đầu vào như e-mail, tệp, văn bản, ngày tháng, số, v.v. QUẢNG CÁO Bản xem trước dự án trực tiếp của Thanh trượt phạm vi
Điều kiện tiên quyếtKiến thức cơ bản về HTML, CSS và một chút Javascript là bắt buộc đối với bài viết này Tôi sẽ cung cấp một lời giải thích rõ ràng về dự án mà ngay cả những người mới bắt đầu cũng có thể hiểu được QUẢNG CÁO kiến thức cơ bản về các công nghệ được liệt kê Tạo trường nhập Otp bằng Html Css & Javascript ( Mã nguồn) Bước 1. cấu trúc HTMLTạo HTML soạn sẵn và kết nối nó với các tệp CSS và Javascript
Sau khi hoàn thành, hãy xem phần tử cơ thể của trang web của chúng tôi. Ở đây, chúng ta sẽ tạo một cấu trúc cho khối trượt hình ảnh
QUẢNG CÁO Mã HTML QUẢNG CÁO Đầu tiên, chúng tôi sẽ tạo một khối bao bọc cho thanh trượt hình ảnh của chúng tôi <div class="wrapper-range"> </div> Tiếp theo, chúng ta sẽ tạo kiểu cho trình bao bọc và phần thân của trang web. Ở đây tôi đang sử dụng bố cục lưới để căn giữa trình bao bọc thanh trượt QUẢNG CÁO Portfolio Website sử dụng HTML và CSS (Source Code) QUẢNG CÁO Kiểu CSS. QUẢNG CÁO * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #0492f1;
}
.wrapper-range {
height: 80px;
width: 380px;
margin: 150px auto;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}
 Bước 2. Tạo thanh trượt phạm vi với đầu vàoBên trong trình bao bọc phạm vi, chúng tôi sẽ tạo một vùng chứa trường để bao bọc giá trị tối thiểu, đầu vào phạm vi và giá trị tối đa. Đối với phạm vi đầu vào này, tôi đã sử dụng giá trị tối thiểu = 0, tối đa = 100 và giá trị mặc định = 50. Thuộc tính các bước kiểm soát khoảng thời gian thay đổi cho một giá trị đầu vào, ở đây chúng tôi đang sử dụng các bước = 1 để thay đổi khoảng thời gian theo 1 đơn vị. Bạn có thể thay đổi giá trị cho các thuộc tính này theo cách bạn muốn QUẢNG CÁO Ngoài ra, chúng ta cũng có thể tạo thanh trượt dọc bằng cách thêm thuộc tính orient=”vertical” vào bên trong phần tử init QUẢNG CÁO <div class="field">
<div class="value left">0</div>
<input type="range" min="0" max="100" value="50" steps="1" />
<div class="value right">100</div>
</div>
Kiểu CSS QUẢNG CÁO Để tạo kiểu cho khối trường, chúng tôi đang sử dụng display=flex để căn chỉnh các phần tử con của nó theo chiều ngang. Ngoài ra, chúng tôi đặt vị trí = tương đối cho khối trường, để điều chỉnh vị trí của các phần tử con của nó liên quan đến nó QUẢNG CÁO field {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value {
position: absolute;
font-size: 18px;
color: #045fa4;
font-weight: 600;
}
.field .value .left {
left: -22px;
}
.field .value .right {
right: -43px;
}
.field input {
flex: 1 1 auto;
}
QUẢNG CÁO Tiếp theo, chúng tôi đang tạo kiểu cho nút phạm vi đầu vào (i. e. , vòng tròn mà chúng ta kéo để thay đổi giá trị thanh trượt). Bạn có thể thiết kế nó theo cách bạn muốn, đối với dự án này, tôi đã thiết kế nó dưới dạng một vòng tròn màu xanh bằng cách giữ chiều rộng và chiều cao = 20px và bán kính đường viền = 50% QUẢNG CÁO .range input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #045fa4;
border: 1px solid #045fa4;
cursor: pointer;
}
.range input::-moz-range-progress {
background: #664AFF;
}
Bước 3. Tạo một màn hình để xem giá trị của phạm viTiếp theo, chúng tôi sẽ tạo một chú giải công cụ hiển thị giá trị hiện tại bất cứ khi nào ai đó sử dụng thanh trượt đầu vào. Đối với điều này, trước tiên chúng tôi tạo một khối HTML với giá trị thanh trượt mặc định (i. e. 50). QUẢNG CÁO Cách tạo ứng dụng thời tiết bằng JavaScript
Sau đó, chúng tôi tạo kiểu cho chú giải công cụ của mình sao cho chú giải vẫn ở trên cùng của nút phạm vi đầu vào của thanh trượt. Chúng tôi sẽ sử dụng vị trí = tương đối cho vùng chứa chú giải công cụ và vị trí = tuyệt đối cho phần tử nhịp, để di chuyển xung quanh đồng bộ với nút trượt,
Đối với chú giải công cụ, chúng tôi điều chỉnh vị trí của nó so với vùng chứa chính của nó và chúng tôi sử dụng biến đổi nguồn gốc = dưới cùng để cung cấp quyền kiểm soát vị trí của nó cho phần dưới cùng của nó. Ngoài ra, sử dụng tỷ lệ (0) để ẩn nó ban đầu và thay đổi tỷ lệ thành tỷ lệ (1) khi chúng tôi muốn chú giải công cụ xuất hiện <div
class="sliderValue"
> <span
id="tootltip"
> 50</span
> </div
> .sliderValue {
position: relative;
width: 100%;
}
.sliderValue span {
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -40px;
line-height: 55px;
z-index: 2;
color: #fff;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.sliderValue span:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: #045fa4;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
Tiếp theo, chúng tôi định kiểu chú giải công cụ cho trường hợp khi nó có lớp 'hiển thị'. Chúng tôi sẽ tự động thêm lớp này vào chú giải công cụ bằng javascript QUẢNG CÁO .sliderValue span.show {
transform: translateX(-70%) scale(1);
}
Bước 4. Kích hoạt Range Slider với JavaScript
Bây giờ chúng tôi sẽ sử dụng Javascript để hiển thị giá trị phạm vi đầu vào xung quanh thanh trượt, bên trong chú giải công cụ.
Đầu tiên, chúng ta sẽ khai báo các biến để giữ thanh trượt đầu vào và giá trị phạm vi
const slideValue=document.querySelector("span");
const inputSlider=document.querySelector("input");Tiếp theo, chúng tôi viết mã để hiển thị động giá trị đầu vào của thanh trượt bên trong chú giải công cụ. Đối với điều này, trước tiên chúng tôi đặt giá trị thanh trượt bên trong một biến 'giá trị', sau đó chúng tôi đặt giá trị vào chú giải công cụ. QUẢNG CÁO
Sau đó, chúng tôi thay đổi thuộc tính bên trái của giá trị chú giải công cụ để tự động di chuyển trên nút trượt cho các giá trị đầu vào khác nhau.
Ghi chú. Tôi chỉ sử dụng % sau giá trị vì tôi đang sử dụng giá trị tối đa 100. Nếu chọn giá trị tối đa lớn hơn 100 (ví dụ: 200), bạn sẽ cần thực hiện một vài điều chỉnh, chẳng hạn như
________số 8 Cuối cùng, chúng tôi thêm lớp 'show' vào chú giải công cụ, thay đổi tỷ lệ biến đổi từ 0 thành 1. Do đó làm cho giá trị tooltip xuất hiện inputSlider.oninput = () => {
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.left = value + "%";
slideValue.classList.add("show");
};
Chúng tôi chỉ muốn chú giải công cụ của mình xuất hiện khi ai đó thay đổi giá trị và sau đó biến mất. Do đó, chúng tôi sẽ viết trình xử lý sự kiện bật mờ cho thanh trượt, hoạt động khi thanh trượt mất tiêu điểm. Trình xử lý sự kiện bật mờ loại bỏ lớp 'hiển thị' khỏi giá trị chú giải công cụ, do đó, Hơn 100 dự án JavaScript với mã nguồn (Người mới bắt đầu đến Nâng cao) làm cho nó biến mất một lần nữa
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #0492f1;
}
.wrapper-range {
height: 80px;
width: 380px;
margin: 150px auto;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}
0Kết quả cuối cùnghttps. //www. codewithrandom. com/wp-content/uploads/2021/12/Untitled-11. mp4 Được rồi các bạn, bây giờ bước cuối cùng là tự vỗ lưng vì chúng ta đã tạo thanh trượt phạm vi của mình |
