Thanh trượt phạm vi CSS đang trở nên phổ biến trong thiết kế trang web hiện đại. Mặc dù chỉ được sử dụng cho các yếu tố trang web cụ thể, nhưng chúng đã được chứng minh là khá hữu ích Show
Thanh trượt phạm vi CSS là một thanh trượt có tay cầm cho phép người dùng chọn một giá trị nhất định từ một phạm vi giới hạn. Thanh trượt phạm vi CSS rất hữu ích cho
Thanh trượt phạm vi hoạt động trên nguyên tắc thiết kế đơn giản và hiệu quả với thao tác kéo. Giao diện của họ rất dễ sử dụng Mặc dù thanh trượt phạm vi có hình thức đơn giản nhưng có nhiều khả năng thiết kế. Chúng có thể có nhiều tay cầm trượt, thay đổi màu sắc, các kiểu khác nhau và các giá trị bán kính đường viền khác nhau Bài viết này liệt kê một số mẫu thanh trượt phạm vi CSS. Những thanh trượt này có thể làm cho một trang web hấp dẫn hơn và có nhiều ứng dụng khác nhau Thanh trượt ChromeDự phòng nhúng CodePen Tác giả. Duncan Malashock Mục này có thể cải thiện thiết kế tổng thể của một trang web. Nó bao gồm năm thanh trượt trong một hộp, mỗi thanh có một màu khác nhau Thanh trượt phạm viDự phòng nhúng CodePen Tác giả. LeFourbeFromage Trong ví dụ về phạm vi thanh trượt CSS này, tác giả sử dụng các biểu tượng ngọn lửa và thay đổi màu nền động Thanh trượt Phạm vi CSSDự phòng nhúng CodePen Tác giả. Javier Đây là một nỗ lực tại một thanh trượt trên nhiều trình duyệt với càng ít JavaScript càng tốt. Người xem có thể trượt tay cầm qua lại bằng con trỏ chuột hoặc sử dụng các nút cộng và trừ Thanh trượt này có hiệu ứng đổ bóng và bán kính đường viền hình hộp Phạm vi đầu vàoDự phòng nhúng CodePen Tác giả. Jorge Epuñan Đây là một thanh trượt đầu vào phạm vi cho phép người dùng thay đổi giá trị bằng cách kéo nó. Phạm vi loại đầu vào là từ một đến mười và tự động thay đổi Thanh trượt lănDự phòng nhúng CodePen Tác giả. phi HTML, CSS và JavaScript làm cho thanh trượt độc đáo này hoạt động. Nó có một con chim cánh cụt như tay cầm của nó Khi người xem cuộn, chú chim cánh cụt sẽ cuộn xuống thanh trượt. Phạm vi loại đầu vào của thanh trượt này là từ 0 đến 50 Thiết kế các trang web trực quan hấp dẫn và hiệu suất cao mà không cần viết một dòng mã nàoLàm hài lòng khách hàng của bạn bằng cách tạo các trang web sáng tạo và tăng cường phản hồi bắt đầu thiết kế Thanh trượt đáp ứngDự phòng nhúng CodePen Tác giả. Simon Goellner Với bút mã này, người xem có thể tạo thanh trượt phạm vi dọc và ngang. Họ sử dụng HTML, CSS và JS Các giá trị số, hiệu ứng màu và dấu tích xác định vị trí của tay cầm Bộ cân bằng phạm viDự phòng nhúng CodePen Tác giả. Long Lazuli Đây là một thanh trượt phạm vi HTML, CSS phong cách. Đầu vào của nó [type=’range’] xác định giá trị của nó từ -5 đến +5 Người xem có thể nhấp vào các giá trị hộp riêng lẻ hoặc trượt chúng bằng con trỏ chuột Vòng xoayDự phòng nhúng CodePen Tác giả. Selcuk Cura Thanh trượt phạm vi này điều khiển hiệu ứng xoay. Bản demo xoay hình ảnh của iPhone Các nhà phát triển có thể sử dụng bút mã này để cung cấp cho người xem chế độ xem 360 độ của một đối tượng Băng chuyền UNCCDự phòng nhúng CodePen Tác giả. Tiếp thị VisionPoint Đây là một thanh trượt đầu vào phạm vi HTML, CSS và JavaScript khác. Nó đi kèm với nhãn, điều khiển trượt và các nút điều khiển Thanh trượt phạm vi phẳngDự phòng nhúng CodePen Tác giả. Rosh Jutherford Bút mã này cung cấp ba thanh trượt phạm vi. Nó có màu nền đỏ với tay cầm màu đỏ và có thiết kế phẳng GSAPDự phòng nhúng CodePen Tác giả. Diaco M Lotfolahi Bút mã này ném một đường cong thiết kế thanh trượt phạm vi. Thay vì hiển thị thanh trượt theo đường thẳng, thanh trượt này uốn cong như hình vòm Nó bao gồm một bảng màu gradient và một hình ảnh động nhỏ. Nó là một thiết kế tốt để sử dụng trên các thiết bị di động Bộ chuyển đổi âm thanhDự phòng nhúng CodePen Tác giả. Eran Shapira Bút mã HTML, CSS và JS này cung cấp thanh trượt phạm vi chuyển đổi âm thanh. Sử dụng nó để tùy chỉnh chất lượng âm thanh Vật liệu gócDự phòng nhúng CodePen Tác giả. kẻ giết người Mẫu thanh trượt phạm vi này cung cấp năm thanh trượt mẫu khác nhau. Tất cả đều sử dụng cùng một thiết kế thanh trượt cơ bản nhưng mỗi loại có một cách sử dụng khác nhau Một chiếc bútDự phòng nhúng CodePen Tác giả. Tyler Lesperance Cây bút này có hai tay cầm và đầu vào phạm vi thanh trượt từ 0 đến 100 phạm vi #91Dự phòng nhúng CodePen Tác giả. Ana Tudor Thiết kế thanh trượt phạm vi HTML, CSS và JavaScript này được thực hiện xuất sắc. Nó bao gồm hoạt ảnh màu, hiệu ứng 3D và hiệu ứng đổ bóng Thang giá có thể kéoDự phòng nhúng CodePen Tác giả. Wayne Roddy Đây là một thanh trượt phạm vi tỷ lệ giá với bán kính viền tám điểm. Nó là một thanh trượt toàn diện cung cấp thông tin chi tiết Trình tạo mật khẩu ngẫu nhiênDự phòng nhúng CodePen Tác giả. Sikriti Dakua Đây là trình tạo mật khẩu ngẫu nhiên HTML và CSS Nó sử dụng các công tắc bật tắt để cho phép người xem bật và tắt các tùy chọn. Nó cũng sử dụng một thanh trượt phạm vi để cho phép người xem chọn độ dài của mật khẩu hoạt hình ô tôDự phòng nhúng CodePen Tác giả. Pankaj Dhiman Thanh trượt phạm vi này hiển thị một số và thứ gì đó bổ sung để hiển thị giá trị của thanh trượt Nó có một chiếc ô tô hoạt hình trong nền đang lái xe trên đường. Người dùng đặt giá trị càng cao, xe chạy càng nhanh Thanh trượt dải màuDự phòng nhúng CodePen Tác giả. Eric Grucza Đây là một thanh trượt phạm vi HTML, CSS và JavaScript đơn giản và tối thiểu kiểu dáng tối thiểuDự phòng nhúng CodePen Tác giả. Renaud Tertrais Đây là một thanh trượt phạm vi đầu vào tối thiểu CSS thuần túy với thiết kế đơn giản và sử dụng nhiều ứng dụng thanh trượt đôiDự phòng nhúng CodePen Tác giả. gabi Đối với những người cần một thanh trượt phạm vi có hai tay cầm, đây là bút mã dành cho bạn. Các tay cầm có bán kính đường viền hình quả bóng với giá trị bên trong chúng Thanh trượt phạm vi tùy chỉnhDự phòng nhúng CodePen Tác giả. Caroline Hagan Blueocto Đây là hai thanh trượt phạm vi với tông màu xanh neon nổi bật Người xem có thể trượt tay cầm bằng con trỏ chuột của họ. Hoặc họ có thể nhập các mức giá trị tối thiểu và tối đa Đầu vào phạm vi tùy chỉnhDự phòng nhúng CodePen Tác giả. Trevan Hetzel Hãy tìm một thanh trượt đầu vào phạm vi HTML, CSS và JavaScript khác tại đây. Cái này có dấu chấm phân biệt từng giá trị Nó cũng có nhãn rõ ràng bên dưới mỗi dấu chấm để mọi người xem đều hiểu giá trị của dấu chấm Phạm vi trình duyệt chéoDự phòng nhúng CodePen Tác giả. Nô-ê Blon Noah Blon đã tạo thanh trượt nhập phạm vi trình duyệt chéo. Nó có bán kính đường viền 24px Bóng hộp trên phần tử ngón tay cái giả tạo hiệu ứng tô màu đơn sắc Thanh trượt bóng SVGDự phòng nhúng CodePen Tác giả. Chris gannon Bút mã này tạo ra một hiệu ứng tuyệt vời. Khi người dùng nhấp vào tay cầm để trượt sang trái hoặc phải, nó sẽ bắt chước hình dạng của một quả bóng bay máy tính PIDự phòng nhúng CodePen Tác giả. Myke Agonia Mẫu thanh trượt phạm vi này hiển thị bốn thanh trượt. Mỗi cái có một tay cầm và một chỉ báo giá trị Thanh trượt chuyển từ xanh lam sang xanh lục khi người xem trượt sang phải. Phía bên trái của thanh trượt đại diện cho giá trị thấp hơn và phía bên phải, giá trị cao hơn Bút mã này có thể được sử dụng như một máy tính có nhiều giá trị Thanh trượt bánh răngDự phòng nhúng CodePen Tác giả. Mariusz Dabrowski Thanh trượt phạm vi hiện đại này sử dụng HTML, CSS và JS. Nó là một thanh trượt phạm vi bán kính viền tròn, có hai tay cầm Các phần tử CSS thay đổi màu nền để hiển thị khoảng cách giữa hai tay cầm Nó bao gồm một số hình ảnh động nhỏ. Chúng bao gồm một hình ảnh bánh răng xuất hiện trong khi người xem trượt tay cầm Máy tính trọng lượngDự phòng nhúng CodePen Tác giả. Piette biển Đây là thanh trượt phạm vi HTML, CSS và JavaScript cho trọng lượng tính bằng kilôgam. Đầu vào phạm vi thanh trượt là từ 0 đến 200 Nó có màu nền gradient và chỉ báo giá trị rõ ràng Thanh trượt phạm viDự phòng nhúng CodePen Tác giả. shashank sharma Bút mã ở đây là mã CSS thuần túy không có JavaScript. Thanh trượt phạm vi CSS này có đầu vào phạm vi từ 0 đến 1000 Số lớn phía trên thanh trượt cho biết giá trị. Bản thân thanh trượt có màu xanh neon Mã đơn giản và sạch sẽ Thanh trượt phạm viDự phòng nhúng CodePen Tác giả. Florian Myke Mẫu HTML, CSS và JavaScript này là một thanh trượt đơn giản có tay cầm mà người xem có thể kéo. Nó cũng bao gồm các thuộc tính mà người xem có thể thay đổi để điều chỉnh giá trị của thanh trượt Thanh trượtDự phòng nhúng CodePen Tác giả. mario maselli Thông thường, thanh trượt nằm ngang. Thanh trượt phạm vi CSS này nằm dọc Nó là một thanh trượt tuyệt vời để sử dụng trong các dự án trực tuyến và đặc biệt là với các thiết bị di động. Người dùng có thể trượt tay cầm lên xuống hoặc sử dụng nút cộng trừ để điều chỉnh thanh trượt Dấu chấm nút radioDự phòng nhúng CodePen Tác giả. Brandon McConnell Đây là mẫu CSS mà nhà phát triển có thể sử dụng trên các trang web bị hạn chế bởi JavaScript. Nó có chỉ báo chấm trượt, nhãn rõ ràng và hiệu ứng hoạt hình Thanh trượt xuyên tâmDự phòng nhúng CodePen Tác giả. tối đa CSS, JS và rất ít HTML tạo nên cây bút mã này Nó là một thanh trượt phạm vi hình tròn với đầu vào phạm vi trượt từ 0 đến 360 độ. Nó là một thanh trượt được tối ưu hóa tốt, phù hợp với mọi trang web Thanh trượt phạm viDự phòng nhúng CodePen Tác giả. Văn phòng khách hàng Bút mã này cung cấp một số ví dụ về thanh trượt với phạm vi đầu vào từ 0 đến 100 Thanh trượt âm lượng giao diện người dùngDự phòng nhúng CodePen Tác giả. Ray Villalobos Bút mã này sử dụng HTML, CSS và JS để tạo thanh trượt phạm vi có thể kéo được với thiết kế tuyệt đẹp Thanh trượt phạm vi tùy chỉnhDự phòng nhúng CodePen Tác giả. Brandon McConnell Đây là một thanh trượt phạm vi tùy chỉnh hữu ích. Tác giả đã sử dụng CSS để tạo thanh trượt và JS để thay đổi màu sắc và nhãn phần trăm Các khía cạnh của thanh trượt này bao gồm bán kính đường viền tròn, giá trị phần trăm và nhãn hình giọt nước. Khi người xem sử dụng con trỏ chuột để kéo núm điều khiển, thanh trượt sẽ chuyển từ màu lam sang màu lục Biểu đồ bánh rán thanh trượtDự phòng nhúng CodePen Tác giả. Giuseppe Canale Bút mã này cung cấp một số ví dụ về biểu đồ vành khuyên. Một thanh trượt phạm vi kiểm soát các giá trị biểu đồ Mỗi biểu đồ có phạm vi loại đầu vào từ 0% đến 100% Thanh trượt phạm vi CSS thuần túyDự phòng nhúng CodePen Tác giả. Manitoba Đây là thanh trượt phạm vi trình duyệt chéo HTML và CSS. Nó có hai tay cầm, phạm vi đầu vào từ 0 đến 100 và thanh trượt màu ngọc lam Thanh trượt phạm vi thời gianDự phòng nhúng CodePen Tác giả. Sean Mooney Mẫu này cung cấp thanh trượt phạm vi và hộp văn bản tự động. Nó giúp người xem chọn khoảng thời gian Hộp văn bản chọn ngày được đề cập và thanh trượt hai tay cầm đặt thời lượng của sự kiện. Mẫu này chỉ sử dụng JavaScript và không có CSS thanh trượt ngân sáchDự phòng nhúng CodePen Tác giả. bom sừng Bút mã này hiển thị một thanh trượt ngân sách. Nó cho phép người xem chọn giá ngân sách với các chỉ số rõ ràng Bản thân thanh trượt là một hình chữ nhật 3D với các hiệu ứng đổ bóng. Khi người xem trượt tay cầm bằng con trỏ chuột, hộp sẽ có màu xanh lục đồng nhất Đầu vào đa phạm viDự phòng nhúng CodePen Tác giả. Yair thậm chí hoặc Bút mã này thể hiện bốn loại thanh trượt phạm vi khác nhau. Bản trình diễn giả định rằng JavaScript sẽ tự động tạo đánh dấu để nhà phát triển không phải điền các biến CSS theo cách thủ công Phạm viDự phòng nhúng CodePen Tác giả. Reza Lavarian Đây là một ví dụ khác về thanh trượt phạm vi CSS giá. Cái này có bảng màu mát mẻ và nhãn rõ ràng Mã này sử dụng tập lệnh CSS mới nhất để màu chuyển sắc trông tự nhiên. Nó cũng sử dụng các hoạt ảnh nhỏ để tạo trải nghiệm người xem tốt Thanh trượt phạm viDự phòng nhúng CodePen Tác giả. Sean Stopnik Trong thanh trượt phạm vi này, tập lệnh CSS tạo thành thiết kế của thanh trượt và JavaScript được sử dụng để lấy giá trị. Các ví dụ thanh trượt của mẫu này có cùng phong cách thiết kế tối giản Nếu bạn thích đọc bài viết này với các ví dụ về thanh trượt phạm vi CSS, thì bạn nên xem bài viết này về biểu mẫu đăng nhập đăng ký CSS Chúng tôi cũng đã viết về một số chủ đề có liên quan như thẻ CSS, hoạt ảnh văn bản CSS, menu HTML và CSS, tab HTML và CSS, ví dụ về hộp kiểm CSS, thiết kế hộp tìm kiếm CSS, mẫu biểu mẫu đăng nhập Bootstrap và kiểu chọn CSS Làm cách nào để hiển thị giá trị thanh trượt phạm vi trong HTML?Chúng tôi thường muốn hiển thị các giá trị tối thiểu và tối đa của thanh trượt dưới dạng văn bản trước và sau thẻ thanh trượt như thế này. . 0 255. which would appear like this:. 0 255. Trong trình duyệt IE, giá trị thanh trượt được hiển thị khi bạn di chuyển thanh trượt. . 0 1000 Thanh trượt phạm vi là gì?Thanh trượt phạm vi là trường nhập liệu mà người bán có thể sử dụng để chọn một giá trị số trong một phạm vi nhất định (giá trị tối thiểu và tối đa).
Làm cách nào để tạo một phạm vi trong HTML?The xác định một điều khiển để nhập một số có giá trị chính xác không quan trọng (như điều khiển thanh trượt . Phạm vi mặc định là 0 đến 100. Tuy nhiên, bạn có thể đặt giới hạn về số nào được chấp nhận với các thuộc tính bên dưới. Mẹo. Luôn thêm thẻ
Làm cách nào để tạo thanh trượt trong HTML?Ví dụ . -webkit-xuất hiện. không ai; . 100%; . 15px; . 5px; . #d3d3d3; . không ai;. -webkit-xuất hiện. không ai; . không ai; . 25px; . 25px; . 50%; . #04AA6D;. bề rộng. 25px; . 25px; . 50%; . #04AA6D; . con trỏ; |
