Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
170
0

Day14: Slider 與列表互動

◼︎ 本集內容：客製化 Slider 與列表的互動練習

透過 Svelte 來實作一個客製化的 Slider，並且盡可能地涵蓋多一點細節。

Avatar for Kalan

Kalan

September 23, 2020

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
820
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
400
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
220
状態管理を楽にする道
Avatar for Kalan kjj6198
1
430
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
180
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
230
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
240
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
210
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
200

Other Decks in Programming

See All in Programming
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
1k
要はバランスからの卒業 #yumemi_grow
Avatar for Takuma Kajikawa kajitack
0
200
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
Avatar for Taisei Yamamoto taiseiyamamotoan
1
200
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
580
誰も頼んでない機能を出荷した話
Avatar for Hidetaka Toriyama zekutax
0
140
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
2
3.1k
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
230
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
7
2.8k
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
Avatar for Susisu susisu
1
1.2k
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
Avatar for TOMIKAWA Sotaro ssssota
3
1.1k
New "Type" system on PicoRuby
Avatar for pocke pocke
1
220
3Dシーンの圧縮
Avatar for Fadis fadis
1
410

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
310
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
380
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
770
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
510
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
380
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.5k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
930
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day14 - UI 實戰篇：客製化 Slider 搭配列表互動

  2. 第 12 屆 IT 鐵⼈賽 使⽤情景 - 有條件地搜尋列表

  3. 第 12 屆 IT 鐵⼈賽 Slider 實作功能 能⽤ input=range 就不要⾃⼰做

    選取範圍、可以透過滑鼠拉動 可以點擊長條部分調整數字

  4. 第 12 屆 IT 鐵⼈賽 列表實作功能 可以順利顯⽰列表 在篩選條件有變化時，做 Transition 效果

  5. 第 12 屆 IT 鐵⼈賽 更多功能 可以透過鍵盤操作數字（左、右） 加入 FLIP Accessibility

    ⽀援 aria-valuemind, aria-valuemax, aria-valuenow role="slider", aria-orientation="horizontal"