Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Thanh trượt

Dùng khi chỉ cần chọn khoảng chừng trên một dải giá trị — lương giờ, khoảng cách, số năm.

Nhập liệu

Xem trước trực tiếp

Nguồn

<div class="dc-range">
  <div class="dc-range__top">
    <label class="dc-range__label" for="dc-range-a">희망 시급</label>
    <output class="dc-range__out" for="dc-range-a">12,000원</output>
  </div>
  <input class="dc-range__input" id="dc-range-a" type="range" min="10000" max="30000" step="500" value="12000" aria-valuetext="시간당 12,000원" />
  <div class="dc-range__ends"><span>10,000원</span><span>30,000원</span></div>
</div>
.dc-range { max-width:420px; font-family:var(--dc-font); }
.dc-range__top { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-3); margin-bottom:var(--dc-2); }
.dc-range__label { font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-range__out { font-family:var(--dc-mono); font-size:14px; font-weight:700; color:var(--dc-brand-text); }
.dc-range__input { -webkit-appearance:none; appearance:none; display:block; width:100%; height:28px; margin:0; background:transparent; accent-color:var(--dc-brand); cursor:pointer; }
.dc-range__input::-webkit-slider-runnable-track { height:6px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-sunken); }
.dc-range__input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-8px; border:2px solid var(--dc-surface); border-radius:var(--dc-r-full); background:var(--dc-brand); box-shadow:var(--dc-sh-2); }
.dc-range__input::-moz-range-track { height:6px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-sunken); }
.dc-range__input::-moz-range-thumb { width:24px; height:24px; border:2px solid var(--dc-surface); border-radius:var(--dc-r-full); background:var(--dc-brand); }
.dc-range__input:focus-visible { outline:2px solid var(--dc-brand); outline-offset:4px; border-radius:var(--dc-r-full); }
.dc-range__input:disabled { accent-color:var(--dc-text-mute); cursor:not-allowed; opacity:.5; }
.dc-range__input:disabled::-webkit-slider-thumb { background:var(--dc-text-mute); }
.dc-range__ends { display:flex; justify-content:space-between; margin-top:var(--dc-1); font-size:12px; color:var(--dc-text-mute); }
.dc-range__ticks { display:flex; justify-content:space-between; list-style:none; margin:var(--dc-2) 0 0; padding:0; }
.dc-range__tick { font-size:11px; color:var(--dc-text-mute); }
.dc-range__tick.is-on { color:var(--dc-brand-text); font-weight:700; }
.dc-range__lock { margin:var(--dc-2) 0 0; font-size:12px; color:var(--dc-text-sub); }

Cách dùng

  • Luôn hiện giá trị đang chọn bằng số ngay bên thanh trượt
  • Ghi hai đầu dải kèm đơn vị để thấy ngay phạm vi
  • Nếu con số phải chính xác, hãy dùng ô nhập số

Điểm cần lưu ý

  • Giữ núm trượt tối thiểu 24px và để khoảng trống quanh nó — ngón tay phải bắt được
  • Dùng input type=range, đừng dựng bằng div: phím mũi tên và trình đọc màn hình có sẵn

Tiếp theo