Range Slider là một chức năng giúp bạn có thể giới hạn phạm vi chọn giá trị 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 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 tìm hiểu nhé!
Cách Tạo Range Slider
Trong HTML có cung cấp chúng ta một thuộc tính cơ bản để tạo range slider là sử dụng thuộc tính type="range"
. Và các thuộc tính đi kèm là:
min
: Giá trị nhỏ nhất người dùng có thể chọnmax
: Giá trị lớn nhất người dùng có thể chọnvalue
: Giá trị mặc định
Bây giờ chúng ta sẽ xem ví dụ ranger slider cơ bản ở dưới đây nhé:
See the Pen Ranger slider cơ bản by haycuoilennao19 (@haycuoilennao19) on 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. Do đó để 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 range slider
<h1> Range Slider</h1>
<p>Bạn hãy dùng chuột đẻ kéo thanh trượt bên dưới.</p>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Giá Trị Của Ranger Slider: <span id="demo"></span></p>
</div>
CSS cho range slider
/*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 xem kết quả mà mình đã thiết kế cho range slider nhé:
See the Pen thiet ke ranger slider html css by haycuoilennao19 (@haycuoilennao19) on 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 bạn xem dưới đây nhé:
See the Pen Ranger Slider HTML CSS JS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn W3School
Nếu bạn muốn thêm giá trực tiếp trên thanh range slider thì có thể xem qua ví dụ dưới đây nhé:
See the Pen Price Range by onyx1812 (@onyx1812) on CodePen.
Các Thư Viện Tạo Range Slider
Phần này mình sẽ giới thiệu đến bạn một số thư viện để xây dựng range silder cho trang web giúp chúng ta có thể tiết kiệm được thời gian cũng như công sức viết mã để xây dựng component này nhé!
Thư Viện Ion.RangeSlider

Thư Viện rangesliderjs

Thư Viện noUiSlider

Thư Viện roundSlider

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ề range slider do các 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ụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to 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 ở dưới máy tính thì nhấp vào chữ Resources ở 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!
See the Pen Day 5: Scalable 3D Range Sliders by Angela He (@zephyo) on CodePen.
Thiết Kế Jquery Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen Range Slider with Feedback by Mikey Wills (@mukealicious) on CodePen.
Thiết Kế CSS Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen CSS Range Slider by Sean Stopnik (@seanstopnik) on CodePen.
Thiết Kế Range Slider Jquery

Kết quả bạn xem bên dưới nha!
See the Pen Range slider output by Michael Wolthers Nielsen (@wolthers) on CodePen.
Cách Tạo Range Slider CSS Javascript

Kết quả bạn xem bên dưới nha!
See the Pen CSS Custom Range Slider by Brandon McConnell (@brandonmcconnell) on CodePen.
Cách Tạo Range Slider Bootstrap

Kết quả bạn xem bên dưới nha!
See the Pen Two Point Range Slider by Jackie Johnston (@jackiejohnston) on CodePen.
Cách Thiết Kế Google Material Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen Google Material Sliders by Leena Lavanya (@leenalavanya) on CodePen.
Cách Thiết Kế Range Slider SVG

Kết quả bạn xem bên dưới nha!
See the Pen SVG Balloon Slider by Chris Gannon (@chrisgannon) on CodePen.
Cách Thiết Kế Slider Range Jquery

Kết quả bạn xem bên dưới nha!
See the Pen Budget Slider by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Kế Range Slider UI HTML5

Kết quả bạn xem bên dưới nha!
See the Pen Range Slider by Kyle (@kylecasestack) on CodePen.
Thiết Kế Jquery UI Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen Gear Slider by Mariusz Dabrowski (@MarioD) on CodePen.
Cách Tạo SVG Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen SVG Range Slider by Blake Bowen (@osublake) on CodePen.
Cách Tạo Range Slider Bằng CoffeeScript

Kết quả bạn xem bên dưới nha!
See the Pen Range by Andreas Storm (@avstorm) on CodePen.
Xây Dựng 360 Deg Circle Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen 360deg Circle Range Slider by sky (@skyajay) on CodePen.
Thiết Kế Range Slider Responsive CSS3 Javascript

Kết quả bạn xem bên dưới nha!
See the Pen Modern, Usable, Responsive Sliders. by Simon Goellner (@simeydotme) on CodePen.
Thiết Kế CSS3 Javascript Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen #029 - Range Slider by Florin Pop (@FlorinPop17) on CodePen.
Range Slider With Dynamic Icons

Kết quả bạn xem bên dưới nha!
See the Pen Range slider with dynamic icons by LeFourbeFromage (@lefourbefromage) on CodePen.
Multi Range Input CSS

Kết quả bạn xem bên dưới nha!
See the Pen Multi Range input, CSS-only by Yair Even Or (@vsync) on CodePen.
3D html5 Range price slider

Kết quả bạn xem bên dưới nha!
See the Pen 3D html5 Range price slider by Vincent Durand (@onediv) on CodePen.
Range Input

Kết quả bạn xem bên dưới nha!
See the Pen Range Input: change live value by Jorge Epuñan (@juanbrujo) on CodePen.
UI Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen UI Range Slider by Abe (@thehonestape) on CodePen.
HTML range slider with 2 handles

Kết quả bạn xem bên dưới nha!
See the Pen Rubber Slider by Aaron Iker (@aaroniker) on CodePen.
Range Sliders With a Rolling Counter

Kết quả bạn xem bên dưới nha!
See the Pen Range Sliders With a Rolling Counter by Jon Kantner (@jkantner) on CodePen.
Rolling Range Slider

Kết quả bạn xem bên dưới nha!
See the Pen Rolling Range Slider by phil (@pwambach) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho 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 email 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ẻ!