របារអូស
ប្រើពេលចង់ឲ្យជ្រើសតំបន់ប្រហែល មិនមែនលេខពិតប្រាកដ — ប្រាក់ឈ្នួល ចម្ងាយ ឬចំនួនឆ្នាំ។
មើលជាមុនផ្ទាល់
ប្រភព
<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); }របៀបប្រើ
- បង្ហាញតម្លៃដែលជ្រើសបច្ចុប្បន្នជាលេខជាប់ជាមួយរបារជារៀងរាល់ពេល
- សរសេរតម្លៃចុងទាំងសងខាងជាមួយឯកតា ដើម្បីឃើញដែនភ្លាម
- បើលេខត្រូវជាក់លាក់ គួរប្រើប្រអប់បញ្ចូលលេខជំនួស
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- ធ្វើឲ្យក្បាលអូសធំបំផុត ២៤px ហើយទុកចន្លោះជុំវិញ — ដៃត្រូវចាប់បាន
- ប្រើ input type=range កុំធ្វើត្រាប់ដោយ div — គ្រាប់ចុចទិស និងកម្មវិធីអានអេក្រង់មានស្រាប់