- @stanko/dual-range-input là một thư viện đầu vào phạm vi kép native sử dụng hai đầu vào phạm vi HTML native.
- Sử dụng đầu vào native để giữ nguyên mọi tương tác mặc định và tính năng trợ năng.
- Được tạo thành từ khoảng 50 dòng JavaScript và CSS.
- Vì sao cần nó
- Tác giả dùng UI để điều chỉnh tham số trong một công cụ vẽ tạo sinh và cần thanh trượt tối thiểu và tối đa.
- Các giải pháp hiện có phụ thuộc vào JavaScript và phải triển khai lại tính năng kéo thả cùng trợ năng.
- Mục tiêu là dùng đầu vào phạm vi HTML native, và khi nhấp vào track thì thanh trượt gần nhất phải di chuyển tới giá trị đó.
- Cách hoạt động
- Hai đầu vào được đặt cạnh nhau, và khi đầu vào thay đổi thì tính điểm giữa của hai giá trị.
- Đặt thuộc tính tối thiểu và tối đa theo điểm giữa, rồi cập nhật chiều rộng của đầu vào.
- Điều chỉnh kích thước đầu vào
- Khi tính chiều rộng đầu vào, cần lưu ý rằng track ngắn hơn chiều rộng đầu vào thực tế.
- Việc tính toán được đơn giản hóa bằng cách cộng thêm chiều rộng của thumb vào chiều rộng đầu vào.
- Thêm padding vào wrapper của đầu vào để chứa phần chiều rộng bổ sung của thumb.
- Di chuyển thumb khi nhấp
- Đầu vào được thay đổi kích thước để gặp nhau tại điểm giữa, và khi nhấp thì thumb gần nhất sẽ di chuyển tới giá trị đó.
- Có thể bật chế độ gỡ lỗi để dễ nhìn thấy điểm giữa.
- Tạo kiểu
- Có thể dùng CSS để tạo kiểu cho đầu vào phạm vi.
- Việc tạo kiểu cho track và thumb khá đơn giản, đồng thời bỏ bo góc ở phần nối giữa của track.
- Chủ đề
- Thư viện phơi bày nhiều biến để có thể thay đổi chủ đề dễ dàng.
- Có cung cấp giá trị mặc định, và có thể tạo chủ đề bằng cách ghi đè các biến.
- Gradient
- Dùng gradient CSS để tô phạm vi đã chọn.
- Sử dụng biến
--dri-gradient-position để thiết lập gradient, và cập nhật cùng với chiều rộng trong mã.
- Kết luận
- Bài viết này nhằm hệ thống lại suy nghĩ, đồng thời hy vọng truyền cảm hứng để thử sử dụng các phần tử native.
1 bình luận
Ý kiến trên Hacker News
<input type=range>, và trên Firefox có lỗi khi nhấp vào tay nắm thì giá trị thay đổi từng bước một