Cách Tạo Range Slider Và 16 Ví Dụ Thực Tế Trong Thiết Kế Web

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ọn
max: Giá trị lớn nhất người dùng có thể chọn
value: 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é!

Cách Tạo Range Slider Và 16 Ví Dụ Thực Tế Trong Thiết Kế Web