Kiritiş · molecule
Slider
Diapazondan qiymat tanlaş: native input type="range", öz körinişi; tölgan qism brend rangida (foxui.js). Aniq qiymat kerak bölsa yonida son maydoni. Kengaytma: diapazon (ikki tutqiç, kesişmaydi), belgilar va yorliqlar (marks/ticks), tutqiç ustida qiymat pufagi. Tik variant (4.93) — ovoz, ekvalayzer, xarita zoom uçun; gistogrammali diapazon (4.95) — narx filtri ostida taqsimot ustunçalari, tanlangan oraliq yoritiladi. Markazdan (4.94): data-origin="center" — töldiriş noldan (yoki data-zero) qiymatgaça çapga yoki öngga; nol joyida belgi; aria-valuetext va yonidagi <output> işora bilan («+20», «−15%»); ikki marta bosiş yoki Delete — boşlanğiç qiymatga. Odatiy qiymat belgisi: marks içida <li data-value="10" data-typical>odatiy</li> — çiziq örniga brend rangidagi uçburçak va yozuv.
Narx oraliği
Baho
Ekvalayzer, dB
Kvartira narxi, mln söm
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-bubble | offalways Pufak doim körinadifocus Hover/fokusda | off |
data-orientation | horizontalvertical Tik; ↑ oşiradi. Bir neçtasi yonma-yon — .fx-slider-stack | horizontal |
data-histogram | 3,8,12,… Ustunçalar balandligi (vergul bilan), xulq çizadi | — |
data-origin | startcenter manfiy ↔ musbat, töldiriş noldan | start |
Anatomiya
- root
.fx-sliderşart - range
.fx-slider-rangeixtiyoriy - rail
.fx-slider-range__railixtiyoriy - fill
.fx-slider-range__fillixtiyoriy - marks
.fx-slider-range__marksixtiyoriy - bubble
.fx-slider-range__bubbleixtiyoriy - histogram
.fx-slider-range__histogramixtiyoriy - stack
.fx-slider-stackixtiyoriy - stack-item
.fx-slider-stack__itemixtiyoriy - center-wrap
.fx-slider-centerixtiyoriy - center-scale
.fx-slider-center__scaleixtiyoriy
Holatlar
focusdisableddisabled-range
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Qadam |
| Home, End | Eng kiçik / eng katta |
| PageUp, PageDown | Katta qadam |
| Tab | Keyingi tutqiçga |
| Delete / Backspace | Markazdan sliderda: boşlanğiç qiymatga qaytaradi |
Native range — ← → ↑ ↓ Home End PageUp/PageDown brauzerda; yorliq va joriy qiymat matnda.
Naqş: WAI-ARIA APG slider-multithumb · rol slider
Kod
AI uçun: qaçon işlatiladi
Işlating
- Taxminiy qiymat diapazonda (ovoz, çegara, foiz).
- Oraliq (narx, sana kunlari) — ikki tutqiçli diapazon.
Işlatmang
- Aniq raqam →
number - Aniq raqam (narx, telefon) uçun slider qilmang — son maydoni.
- Ikki tutqiçli diapazonda tutqiçlarning yorliği (aria-label) alohida bölsin — «Eng kam», «Eng köp».
- Gistogrammani yagona ma'lumot manbai qilmang — u bezak (aria-hidden); aniq son tutqiç pufagida va matnda bölsin.
npx foxui add slider
<label class="fx-field">
<span class="fx-label">Kunlik çegara: <output>40</output> $</span>
<input class="fx-slider" type="range" min="0" max="100" value="40" data-fx-slider oninput="this.previousElementSibling.querySelector('output').value=this.value">
</label>
<div class="fx-field"><span class="fx-label" id="rg-l">Narx oraliği</span>
<div class="fx-slider-range" data-fx-slider data-bubble="always" data-unit="söm" role="group" aria-labelledby="rg-l">
<div class="fx-slider-range__rail" aria-hidden="true"><span class="fx-slider-range__fill"></span></div>
<input class="fx-slider" type="range" min="0" max="1000000" step="50000" value="200000" aria-label="Eng kam narx">
<input class="fx-slider" type="range" min="0" max="1000000" step="50000" value="700000" aria-label="Eng köp narx">
<ol class="fx-slider-range__marks" aria-hidden="true"><li data-value="0">0</li><li data-value="250000">250 000</li><li data-value="500000">500 000</li><li data-value="750000">750 000</li><li data-value="1000000">1 mln</li></ol>
</div></div>
<div class="fx-field"><span class="fx-label" id="tk-l">Baho</span>
<div class="fx-slider-range" data-fx-slider data-bubble="focus" data-ticks role="group" aria-labelledby="tk-l">
<div class="fx-slider-range__rail" aria-hidden="true"><span class="fx-slider-range__fill"></span></div>
<input class="fx-slider" type="range" min="0" max="10" step="1" value="6" aria-label="Baho">
</div></div>
<div class="fx-field"><span class="fx-label" id="eq-l">Ekvalayzer, dB</span>
<div class="fx-slider-stack" role="group" aria-labelledby="eq-l"><label class="fx-slider-stack__item"><output>4</output><input class="fx-slider" type="range" data-orientation="vertical" min="-12" max="12" value="4" data-fx-slider aria-label="60 Gs" oninput="this.previousElementSibling.value=this.value">60</label><label class="fx-slider-stack__item"><output>2</output><input class="fx-slider" type="range" data-orientation="vertical" min="-12" max="12" value="2" data-fx-slider aria-label="250 Gs" oninput="this.previousElementSibling.value=this.value">250</label><label class="fx-slider-stack__item"><output>0</output><input class="fx-slider" type="range" data-orientation="vertical" min="-12" max="12" value="0" data-fx-slider aria-label="1k Gs" oninput="this.previousElementSibling.value=this.value">1k</label><label class="fx-slider-stack__item"><output>-3</output><input class="fx-slider" type="range" data-orientation="vertical" min="-12" max="12" value="-3" data-fx-slider aria-label="4k Gs" oninput="this.previousElementSibling.value=this.value">4k</label><label class="fx-slider-stack__item"><output>5</output><input class="fx-slider" type="range" data-orientation="vertical" min="-12" max="12" value="5" data-fx-slider aria-label="16k Gs" oninput="this.previousElementSibling.value=this.value">16k</label></div></div>
<div class="fx-field"><span class="fx-label" id="hg-l">Kvartira narxi, mln söm</span>
<div class="fx-slider-range" data-fx-slider data-bubble="focus" data-unit="mln" data-histogram="2,4,7,11,16,22,25,21,18,15,12,9,8,6,5,4,3,3,2,1" role="group" aria-labelledby="hg-l">
<div class="fx-slider-range__rail" aria-hidden="true"><span class="fx-slider-range__fill"></span></div>
<input class="fx-slider" type="range" min="300" max="2300" step="50" value="650" aria-label="Eng kam narx">
<input class="fx-slider" type="range" min="300" max="2300" step="50" value="1300" aria-label="Eng köp narx">
<ol class="fx-slider-range__marks" aria-hidden="true"><li data-value="300">300</li><li data-value="1300">1 300</li><li data-value="2300">2 300+</li></ol>
</div></div>
<!-- Markazdan (4.94): manfiy ↔ musbat -->
<div class="fx-field" style="max-inline-size:24rem"><label class="fx-label" for="sl-c1">Rasm yorqinligi</label>
<div class="fx-slider-center"><input class="fx-slider" id="sl-c1" type="range" min="-50" max="50" step="1" value="20" data-origin="center" data-fx-slider><output for="sl-c1"></output>
<div class="fx-slider-center__scale" aria-hidden="true"><span>−50</span><span>0</span><span>+50</span></div></div></div>
<div class="fx-field" style="max-inline-size:24rem"><label class="fx-label" for="sl-c2">Narxga tuzatiş (çegirma ↔ ustama)</label>
<div class="fx-slider-center"><input class="fx-slider" id="sl-c2" type="range" min="-30" max="30" step="5" value="-15" data-origin="center" data-unit="%" data-fx-slider><output for="sl-c2"></output></div></div>Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-page --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-motion-scale-press --fx-radius-badge --fx-radius-circle --fx-shadow-sm --fx-size-checkbox --fx-size-min-target --fx-slider-hi --fx-slider-lo --fx-slider-zero --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-tertiary --fx-viz-brand --fx-viz-track
Şu toifadan
KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !CheckoutTölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).ComboboxYozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).Yoziş paneli (composer)AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».