<input type="range">

Try it

<p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume" min="0" max="11" />
  <label for="volume">Volume</label>
</div>

<div>
  <input
    type="range"
    id="cowbell"
    name="cowbell"
    min="0"
    max="100"
    value="90"
    step="10" />
  <label for="cowbell">Cowbell</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Nếu trình duyệt của người dùng không hỗ trợ kiểu range, nó sẽ dự phòng và coi nó là ô nhập text.

Giá trị

Giá trị của phần tử <input type="range"> được đặt bằng thuộc tính value chấp nhận một chuỗi đại diện cho số được chọn. Giá trị không bao giờ là chuỗi rỗng (""). Giá trị mặc định là điểm giữa giữa tối thiểu và tối đa được chỉ định—trừ khi giá trị tối đa thực sự nhỏ hơn tối thiểu, trong trường hợp đó giá trị mặc định được đặt thành giá trị của thuộc tính min. Thuật toán xác định giá trị mặc định là:

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

Nếu cố đặt giá trị thấp hơn tối thiểu, nó được đặt thành tối thiểu. Tương tự, cố đặt giá trị cao hơn tối đa sẽ dẫn đến việc đặt nó thành tối đa.

Xác thực

Không có xác thực mẫu nào; tuy nhiên, các hình thức xác thực tự động sau đây được thực hiện:

• Nếu value được đặt thành giá trị không thể chuyển đổi thành số dấu phẩy động hợp lệ, xác thực sẽ thất bại vì ô nhập đang gặp phải đầu vào xấu.
• Giá trị sẽ không nhỏ hơn min. Mặc định là 0.
• Giá trị sẽ không lớn hơn max. Mặc định là 100.
• Giá trị sẽ là bội số của step. Mặc định là 1.

Thuộc tính bổ sung

Ngoài các thuộc tính được chia sẻ bởi tất cả các phần tử <input>, ô nhập range còn cung cấp các thuộc tính sau.

list

Giá trị của thuộc tính list là id của một phần tử <datalist> nằm trong cùng tài liệu. <datalist> cung cấp danh sách các giá trị được xác định trước để gợi ý cho người dùng. Bất kỳ giá trị nào trong danh sách không tương thích với type sẽ không được đưa vào các tùy chọn gợi ý. Các giá trị được cung cấp là gợi ý, không phải yêu cầu: người dùng có thể chọn từ danh sách này hoặc cung cấp giá trị khác.

Xem ví dụ thêm dấu tích bên dưới để biết ví dụ về cách các tùy chọn trên range được biểu thị trong các trình duyệt được hỗ trợ.

max

Giá trị lớn nhất trong phạm vi các giá trị được phép. Nếu value nhập vào phần tử vượt quá giá trị này, phần tử sẽ không vượt qua xác thực ràng buộc. Nếu giá trị của thuộc tính max không phải là số thì phần tử không có giá trị tối đa.

Giá trị này phải lớn hơn hoặc bằng giá trị của thuộc tính min. Xem thuộc tính HTML max.

min

Giá trị thấp nhất trong phạm vi các giá trị được phép. Nếu value của phần tử nhỏ hơn giá trị này, phần tử sẽ không vượt qua xác thực ràng buộc. Nếu giá trị được chỉ định cho min không phải là số hợp lệ, ô nhập không có giá trị tối thiểu.

Giá trị này phải nhỏ hơn hoặc bằng giá trị của thuộc tính max. Xem thuộc tính HTML min.

step

Thuộc tính step là số chỉ định độ chi tiết mà giá trị phải tuân theo, hoặc giá trị đặc biệt any, được mô tả bên dưới. Chỉ những giá trị là bội số nguyên của step từ giá trị cơ sở mới hợp lệ. Giá trị cơ sở là min nếu được chỉ định, value nếu không, hoặc 0 nếu không có cái nào.

Giá trị bước mặc định cho ô nhập step là 1, chỉ cho phép nhập số nguyên—trừ khi giá trị cơ sở không phải là số nguyên.

Giá trị chuỗi any có nghĩa là không có bước cụ thể nào được áp dụng và bất kỳ giá trị nào đều được phép (trừ các ràng buộc khác như min và max). Xem ví dụ Đặt step thành giá trị any để biết cách điều này hoạt động trong các trình duyệt được hỗ trợ.

Thuộc tính không chuẩn

orient

Tương tự thuộc tính CSS không chuẩn -moz-orient ảnh hưởng đến các phần tử <progress> và <meter>, thuộc tính orient xác định hướng của thanh trượt range. Các giá trị bao gồm horizontal, nghĩa là range được hiển thị theo chiều ngang, và vertical, trong đó range được hiển thị theo chiều dọc.

Ví dụ

Trong khi kiểu number cho phép người dùng nhập số với các ràng buộc tùy chọn để buộc giá trị của họ nằm giữa tối thiểu và tối đa, nó yêu cầu họ nhập một giá trị cụ thể. Kiểu ô nhập range cho phép bạn hỏi người dùng về một giá trị trong các trường hợp người dùng có thể không quan tâm—hoặc không biết—giá trị số cụ thể được chọn là gì.

Một vài ví dụ về tình huống mà ô nhập range thường được dùng:

• Các điều khiển âm thanh như âm lượng và cân bằng, hoặc các điều khiển bộ lọc.
• Các điều khiển cấu hình màu như kênh màu, độ trong suốt, độ sáng, v.v.
• Các điều khiển cấu hình trò chơi như độ khó, khoảng cách nhìn, kích thước thế giới, v.v.
• Độ dài mật khẩu cho mật khẩu được tạo bởi trình quản lý mật khẩu.

Theo quy tắc, nếu người dùng có nhiều khả năng quan tâm đến phần trăm khoảng cách giữa giá trị tối thiểu và tối đa hơn là số thực tế, một ô nhập range là ứng viên tuyệt vời. Ví dụ, trong trường hợp điều khiển âm lượng hệ thống âm thanh gia đình, người dùng thường nghĩ "đặt âm lượng ở giữa tối đa" thay vì "đặt âm lượng thành 0.5".

Chỉ định tối thiểu và tối đa

Theo mặc định, tối thiểu là 0 và tối đa là 100. Nếu đó không phải là điều bạn muốn, bạn có thể dễ dàng chỉ định các giới hạn khác bằng cách thay đổi giá trị của các thuộc tính min và/hoặc max. Chúng có thể là bất kỳ giá trị dấu phẩy động nào.

Ví dụ, để yêu cầu người dùng nhập giá trị từ -10 đến 10, bạn có thể dùng:

<input type="range" min="-10" max="10" />

Đặt độ chi tiết của giá trị

Theo mặc định, độ chi tiết là 1, nghĩa là giá trị luôn là số nguyên. Để kiểm soát độ chi tiết, bạn có thể thay đổi thuộc tính step. Ví dụ, nếu bạn cần giá trị nằm giữa 5 và 10, bạn nên đặt giá trị step thành 0.5:

Đặt thuộc tính step

<input type="range" min="5" max="10" step="0.5" />

Đặt step thành any

Nếu bạn muốn chấp nhận bất kỳ giá trị nào bất kể có bao nhiêu chữ số thập phân, bạn có thể chỉ định giá trị any cho thuộc tính step:

HTML

<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>

JavaScript

const value = document.querySelector("#value");
const input = document.querySelector("#pi_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});

Ví dụ này cho phép người dùng chọn bất kỳ giá trị nào từ 0 đến π mà không có bất kỳ hạn chế nào về phần thập phân của giá trị được chọn. JavaScript được dùng để hiển thị giá trị thay đổi như thế nào khi người dùng tương tác với range.

Thêm dấu tích

Để thêm dấu tích vào điều khiển range, hãy thêm thuộc tính list, cung cấp id của phần tử <datalist> định nghĩa một loạt dấu tích trên điều khiển. Mỗi điểm được biểu diễn bằng phần tử <option> với value được đặt thành giá trị range mà tại đó cần vẽ dấu.

HTML

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Kết quả

Dùng cùng datalist cho nhiều điều khiển range

Để giúp bạn không phải lặp mã, bạn có thể tái sử dụng cùng một <datalist> cho nhiều phần tử <input type="range">, và các kiểu <input> khác.

HTML

<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>

Kết quả

Thêm nhãn

Bạn có thể gán nhãn cho các dấu tích bằng cách đặt thuộc tính label cho các phần tử <option>. Tuy nhiên, nội dung nhãn sẽ không được hiển thị theo mặc định. Bạn có thể dùng CSS để hiển thị nhãn và định vị chúng đúng cách. Đây là một cách bạn có thể làm điều này.

HTML

<label for="tempB">Choose a comfortable temperature:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="very cold!"></option>
  <option value="25" label="cool"></option>
  <option value="50" label="medium"></option>
  <option value="75" label="getting warm!"></option>
  <option value="100" label="hot!"></option>
</datalist>

CSS

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}

Kết quả

Tạo điều khiển range dọc

Theo mặc định, các trình duyệt hiển thị ô nhập range dưới dạng thanh trượt với núm trượt sang trái và phải.

Để tạo range dọc trong đó núm trượt lên xuống, hãy đặt thuộc tính writing-mode với giá trị vertical-rl hoặc vertical-lr:

<input type="range" min="0" max="10" value="8" />

input[type="range"] {
  writing-mode: vertical-lr;
}

Điều này làm cho thanh trượt range hiển thị theo chiều dọc:

Bạn cũng có thể đặt thuộc tính CSS appearance thành giá trị không chuẩn slider-vertical nếu bạn muốn hỗ trợ các phiên bản Chrome và Safari cũ hơn, và thêm thuộc tính không chuẩn orient="vertical" để hỗ trợ các phiên bản Firefox cũ hơn.

Xem Tạo điều khiển biểu mẫu dọc để biết các ví dụ.

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Biểu mẫu HTML
• <input> và giao diện HTMLInputElement nó dựa trên
• <input type="number">
• validityState.rangeOverflow và validityState.rangeUnderflow
• Kiểm soát nhiều tham số với ConstantSourceNode
• Tạo điều khiển biểu mẫu dọc
• Tạo kiểu phần tử range