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

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
0
130

Day14: Slider 與列表互動

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

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

Avatar for Kalan

Kalan

September 23, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
REALITY コマンド作成チュートリアル
Avatar for にしうり らく nishiuriraku
0
120
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.5k
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
Avatar for suzuki masayuki suzukimar
0
140
インプロセスQAにおいて大事にしていること / In-process QA Meetup
Avatar for MEDLEY, INC. medley
0
190
「MCPを使ってる人」が より詳しくなるための解説
Avatar for Kota-Yamaguchi yamaguchidesu
0
250
最速Green Tea 🍵 Garbage Collector
Avatar for kuro kuro_kurorrr
1
160
파급효과: From AI to Android Development
Avatar for HyunWoo Lee l2hyunwoo
0
170
SwiftDataのカスタムデータストアを試してみた
Avatar for 1mash0 1mash0
0
150
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
120
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
Avatar for Kei Oyama oyamakei
0
130
オープンソースコントリビュート入門
Avatar for katsuma _katsuma
0
150
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
Avatar for Ernest Chiang dwchiang
0
150

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
940
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Navigating Team Friction
Avatar for Lara Hogan lara
185
15k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
BBQ
Avatar for Matthew Crist matthewcrist
88
9.6k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k

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"