Giá trị giá trị Html

Nếu trình duyệt của người dùng không hỗ trợ loại

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

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

Không có mẫu xác nhận có sẵn;

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

Thuộc tính chứa một chuỗi chứa một chuỗi đại diện cho số đã chọn. Giá trị không bao giờ là một chuỗi rỗng (

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

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

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

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

Ngoài các thuộc tính được chia sẻ bởi tất cả các phần tử

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

Các giá trị của thuộc tính danh sách là

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

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

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

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

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

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

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

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

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

Giá trị thấp nhất trong phạm vi giá trị cho phép. Nếu giá trị của phần tử nhỏ hơn giá trị này, thì phần tử không xác thực được ràng buộc. Nếu một giá trị được chỉ định cho

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

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

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

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

Thuộc tính

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

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

Giá trị chuỗi là

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

Ghi chú. Khi dữ liệu do người dùng nhập không tuân theo cấu hình từng bước, tác nhân người dùng có thể làm tròn đến giá trị hợp lệ gần nhất, ưu tiên các số theo hướng dương khi có hai tùy chọn gần bằng nhau

Giá trị bước mặc định cho đầu vào

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

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

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

Tương tự như thuộc tính CSS không chuẩn -moz-orient ảnh hưởng đến các phần tử

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

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

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

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

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

Ghi chú. Các thuộc tính đầu vào sau không áp dụng cho phạm vi đầu vào. _______256, _______257, _______258, _______259, _______340, _______341, _______342, _______343, _______344, _______345, _______346, _______347, _______348, _______349, _______440, _______441, _______442, _______443, _______444, và _______445. Bất kỳ thuộc tính nào trong số này, nếu có, sẽ bị bỏ qua

Mặc dù loại

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

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

Một vài ví dụ về các tình huống trong đó đầu vào phạm vi thường được sử dụng

• Điều khiển âm thanh như âm lượng và cân bằng hoặ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 hiển thị, kích thước thế giới, v.v.
• Độ dài mật khẩu cho người quản lý mật khẩu tạo mật khẩu

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

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 nhau bằng cách thay đổi giá trị của thuộc tính và/hoặc. Đây 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 cung cấp giá trị từ -10 đến 10, bạn có thể sử dụng

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

Theo mặc định, mức độ chi tiết là 1, nghĩa là giá trị luôn là một số nguyên. Bạn có thể thay đổi thuộc tính để kiểm soát mức độ chi tiết. Ví dụ: Nếu bạn cần giá trị từ 5 đến 10, chính xác đến hai chữ số thập phân, bạn nên đặt giá trị của

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

Đặt thuộc tính bước

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

Đặt bước thành "bất kỳ"

Nếu bạn muốn chấp nhận bất kỳ giá trị nào bất kể giá trị đó mở rộng đến bao nhiêu chữ số thập phân, bạn có thể chỉ định giá trị

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

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

Ví dụ này cho phép người dùng chọn bất kỳ giá trị nào trong khoảng từ 0 đến π mà không có bất kỳ hạn chế nào đối với phần phân số của giá trị đã chọn

Để thêm các dấu băm vào một điều khiển phạm vi, hãy bao gồm thuộc tính

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

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

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

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

HTML

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

Kết quả

Bạn có thể gắn nhãn các dấu thăng bằng cách cho các phần tử

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

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

HTML

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

CSS

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

Kết quả

Theo mặc định, trình duyệt hiển thị phạm vi đầu vào dưới dạng thanh trượt với núm trượt sang trái và phải

Để tạo một phạm vi dọc, trong đó núm trượt lên và xuống, hãy đặt thuộc tính CSS

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

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

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

Kiểm soát phạm vi ngang

Xem xét điều khiển phạm vi này

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

Điều khiển này nằm ngang (ít nhất là trên hầu hết nếu không muốn nói là tất cả các trình duyệt chính; các trình duyệt khác có thể thay đổi)

Sử dụng thuộc tính xuất hiện

Thuộc tính

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

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

Chúng tôi sử dụng cùng một HTML như trong các ví dụ trước

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

Chúng tôi chỉ nhắm mục tiêu đầu vào với một loại phạm vi, thay đổi chế độ ghi từ mặc định thành

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

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

Giá trị trong HTML là gì?

Làm cách nào để lấy giá trị từ thẻ HTML?

Làm cách nào để lưu trữ giá trị trong HTML?

Giá trị văn bản HTML là gì?