Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Range Slider Và 16 Ví Dụ Cho Website

Cách Tạo Range Slider Và 16 Ví Dụ Cho Website


Ngày 23 Tháng 7 Năm 2020

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é!

Thư Viện Ion.RangeSlider

Thư Viện Ion.RangeSlider

Nguồn

Thư Viện rangesliderjs

Thư Viện rangesliderjs

Nguồn

Thư Viện noUiSlider

Thư Viện noUiSlider

Nguồn

Thư Viện roundSlider

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ề 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

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.

Nguồn

Thiết Kế Jquery Range Slider

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.

Nguồn

Thiết Kế CSS Range Slider

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.

Nguồn

Thiết Kế Range Slider Jquery

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.

Nguồn

Cách Tạo Range Slider CSS Javascript

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.

Nguồn

Cách Tạo Range Slider Bootstrap

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.

Nguồn

Cách Thiết Kế Google Material Range Slider

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.

Nguồn

Cách Thiết Kế Range Slider SVG

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.

Nguồn

Cách Thiết Kế Slider Range Jquery

Slider Range Jquery

Kết quả bạn xem bên dưới nha!

See the Pen Budget Slider by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Range Slider UI HTML5

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.

Nguồn

Thiết Kế Jquery UI Range Slider

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.

Nguồn

Cách Tạo SVG Range Slider

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.

Nguồn

Cách Tạo Range Slider Bằng CoffeeScript

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.

Nguồn

Xây Dựng 360 Deg Circle Range Slider

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.

Nguồn

Thiết Kế Range Slider Responsive CSS3 Javascript

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.

Nguồn

Thiết Kế CSS3 Javascript Range Slider

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.

Nguồn

Range Slider With Dynamic Icons

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.

Nguồn

Multi Range Input CSS

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.

Nguồn

3D html5 Range price slider

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.

Nguồn

Range Input

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.

Nguồn

UI Range Slider

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.

Nguồn

HTML range slider with 2 handles

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.

Nguồn

Range Sliders With a Rolling Counter

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.

Nguồn

Rolling Range Slider

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.

Nguồn

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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.