Lỗi phạm vi trong javascript
Range Slider là một chức năng giúp bạn có thể giới hạn phạm vi giá trị lựa chọn của người dùng trong khoảng nhỏ nhất và lớn nhất. Nó rất hữu ích đối với các trang thương mại điện tử khi người dùng cần tìm kiếm hàng hóa trong một khoảng tiền nào đó. Và để hiểu rõ hơn thì chúng ta sẽ cùng nhau đi vào khám phá nhé
Cách Tạo Range Slider
Trong HTML cung cấp cho chúng ta một thuộc tính cơ bản để tạo thanh trượt phạm vi sử dụng thuộc tính type="range". And các thuộc tính đi kèm là
min. Giá trị nhỏ nhất mà người dùng có thể chọnmax. Giá trị lớn nhất mà người dùng có thể chọnvalue. default value
Bây giờ chúng ta sẽ xem ví dụ cơ bản về thanh trượt kiểm lâm ở dưới đây nhé
Xem thanh trượt Pen Ranger cơ bản của haycuoilennao19 [@haycuoilennao19] trên CodePen
Một điểm chúng ta có thể thấy là nó không hiển thị giá trị làm cho người dùng không biết sẽ chọn như thế nào. Làm vậy để hiển thị giá trị thì chúng ta cần sử dụng một số thuộc tính CSS và Javascript nhé
HTML cho thanh trượt phạm vi
Range Slider
Bạn hãy dùng chuột đẻ kéo thanh trượt bên dưới.
Giá Trị Của Ranger Slider:
CSS cho thanh trượt phạm vi
/*Thiết lập style cho range slider*/
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
/*Thiết kế phần để kéo trượt trong rangerslider -- dùng -webkit- để chạy trên Chrome, Opera, Safari, Edge*/
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: DodgerBlue;
cursor: pointer;
}
/*-moz- dùng để thiết kế rangerslider trên firefox nhé*/
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
Và chúng ta cùng xem kết quả mà mình đã thiết kế cho range slider nhé
Xem thanh trượt Bút thiết kế kiểm lâm html css của haycuoilennao19 [@haycuoilennao19] trên CodePen
Bây giờ chúng ta sẽ thêm một đoạn mã Javascript để nó có thể hiển thị giá trị nhé
var slider = document.getElementById["myRange"];
var output = document.getElementById["demo"];
/* Hiển thị giá trị mặc định 50 cho thẻ span với id là demo*/
output.innerHTML = slider.value;
/* cập nhật giá trị hiện tại của ranger slider*/
slider.oninput = function[] {
output.innerHTML = this.value;
}
Và Kết quả cuối cùng các bạn xem dưới đây nhé
Xem Pen Ranger Slider HTML CSS JS của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nguồn W3School
Nếu bạn muốn thêm giá trực tiếp trên thanh trượt thanh thì có thể xem qua ví dụ dưới đây nhé
Xem Phạm vi giá bút của onyx1812 [@onyx1812] trên CodePen
Các Thư Viện Tạo Range Slider
Phần này mình sẽ giới thiệu cho các bạn một số thư viện xây dựng dãy silder cho trang web giúp chúng tôi có thể tiết kiệm điện năng được thời gian cũng như công sức viết mã để xây dựng thành phần này nhé.
Thư Viện Ion. Thanh trượt phạm vi
Nguồn
Rangeslidejs Thư Viện
Nguồn
Thư Viện noUiSlider
Nguồn
Thư Viện roundSlider
Nguồn
Các Ví Dụ Về Input Range Slider
Tiếp theo đây chúng ta sẽ đi vào những ví dụ khác về thanh trượt phạm vi do bạn lập trình viên trên Codepen thiết kế và phát triển nhé.
Trước khi đi vào ví dụ, mình có một số lưu ý sau là để xem kết quả rõ ràng hơn bạn chuyển sang chế độ màn hình 0. 5x, 0. 25x hay if it does not show, you please memory minh mình is con people in Codepen new see was nhé. Nếu file là SCSS thì bạn có thể convert sang CSS ở đây nhé. SCSS sang CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở bên dưới máy tính, hãy nhấp vào chữ Resources ở bên dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Thiết Kế 3D Range Slider
Kết quả bạn xem bên dưới nha
Xem Ngày Bút 5. Scalable 3D Range Sliders của Angela He [@zephyo] trên CodePen
Nguồn
Thiết Kế Jquery Range Slider
Kết quả bạn xem bên dưới nha
Xem Thanh trượt Phạm vi Bút có Phản hồi của Mikey Wills [@mukealicious] trên CodePen
Nguồn
Thiết Kế CSS Range Slider
Kết quả bạn xem bên dưới nha
Xem Pen CSS Range Slider của Sean Stopnik [@seanstopnik] trên CodePen
Nguồn
Thiết kế Range Slider Jquery
Kết quả bạn xem bên dưới nha
Xem kết quả thanh trượt Phạm vi bút của Michael Wolthers Nielsen [@wolthers] trên CodePen
Nguồn
Cách Tạo Range Slider CSS Javascript
Kết quả bạn xem bên dưới nha
Xem Thanh trượt phạm vi tùy chỉnh Pen CSS của Brandon McConnell [@brandonmcconnell] trên CodePen
Nguồn
Cách Tạo Range Slider Bootstrap
Kết quả bạn xem bên dưới nha
Xem Pen Two Point Range Slider của Jackie Johnston [@jackiejohnston] trên CodePen
Nguồn
Cách Thiết Kế Google Material Range Slider
Kết quả bạn xem bên dưới nha
Xem Pen Google Material Sliders của Leena Lavanya [@leenalavanya] trên CodePen
Nguồn
Thanh trượt phạm vi Cách Thiết Kế SVG
Kết quả bạn xem bên dưới nha
Xem Pen SVG Balloon Slider của Chris Gannon [@chrisgannon] trên CodePen
Nguồn
Cách Thiết Kế Slider Range Jquery
Kết quả bạn xem bên dưới nha
Xem Pen Budget Slider của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nguồn
Thiết Kế Range Slider UI HTML5
Kết quả bạn xem bên dưới nha
Xem Thanh trượt Phạm vi Bút của Kyle [@kylecasestack] trên CodePen
Nguồn
Thiết Kế Jquery UI Range Slider
Kết quả bạn xem bên dưới nha
Xem Pen Gear Slider của Mariusz Dabrowski [@MarioD] trên CodePen
Nguồn
Cách Tạo SVG Range Slider
Kết quả bạn xem bên dưới nha
Xem Pen SVG Range Slider của Blake Bowen [@osublake] trên CodePen
Nguồn
Cách Tạo Range Slider Bằng CoffeeScript
Kết quả bạn xem bên dưới nha
Xem Phạm vi bút của Andreas Storm [@avstorm] trên CodePen
Nguồn
Xây dựng thanh trượt phạm vi vòng tròn 360 độ
Kết quả bạn xem bên dưới nha
Xem Thanh trượt phạm vi hình tròn Pen 360deg by sky [@skyajay] trên CodePen
Nguồn
Thiết Kế Range Slider Responsive CSS3 Javascript
Kết quả bạn xem bên dưới nha
Xem Thanh trượt Hiện đại, Có thể Sử dụng, Phản hồi nhanh. bởi Simon Goellner [@simeydotme] trên CodePen
Nguồn
Thiết Kế CSS3 Javascript Range Slider
Kết quả bạn xem bên dưới nha
See the Pen #029 - Range Slider của Florin Pop [@FlorinPop17] trên CodePen
Nguồn
Thanh trượt phạm vi với các biểu tượng động
Kết quả bạn xem bên dưới nha
Xem thanh trượt Phạm vi bút với các biểu tượng động của LeFourbeFromage [@lefourbefromage] trên CodePen
Nguồn
CSS đầu vào đa phạm vi
Kết quả bạn xem bên dưới nha
Xem đầu vào Pen Multi Range, CSS-only của Yair Even Hoặc [@vsync] trên CodePen
Nguồn
Thanh trượt giá phạm vi html5 3D
Kết quả bạn xem bên dưới nha
Xem thanh trượt giá Pen 3D html5 Range của Vincent Durand [@onediv] trên CodePen
Nguồn
Phạm vi đầu vào
Kết quả bạn xem bên dưới nha
Xem Đầu vào phạm vi bút. thay đổi giá trị trực tiếp của Jorge Epuñan [@juanbrujo] trên CodePen
Nguồn
Thanh trượt phạm vi giao diện người dùng
Kết quả bạn xem bên dưới nha
Xem Thanh trượt phạm vi giao diện người dùng bút của Abe [@thehonestape] trên CodePen
Nguồn
Thanh trượt phạm vi HTML có 2 tay cầm
Kết quả bạn xem bên dưới nha
Xem Pen Rubber Slider của Aaron Iker [@aaroniker] trên CodePen
Nguồn
Thanh trượt phạm vi với bộ đếm lăn
Kết quả bạn xem bên dưới nha
Xem Thanh trượt Phạm vi Bút với Bộ đếm Cán của Jon Kantner [@jkantner] trên CodePen
Nguồn
Thanh trượt phạm vi lăn
Kết quả bạn xem bên dưới nha
Xem Thanh trượt phạm vi lăn bút của phil [@pwambach] trên CodePen
Nguồn
Tổng kết
Qua đây mình mong bài viết sẽ cung cấp thêm cho các bạn kiến thức về range slider hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi mail mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ