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
340
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
190
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
180
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
150

Other Decks in Programming

See All in Programming
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
Avatar for Naoya Ito naoya
17
4.1k
A comprehensive view of refactoring
Avatar for Marabesi marabesi
0
120
Cline指示通りに動かない？ AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
Avatar for 葦沢かもめ kamomeashizawa
1
450
単体テストの始め方/作り方
Avatar for toms toms74209200
0
430
Cursor Meetup Tokyo ゲノミクスとCursor： 進化と制約のあいだ
Avatar for Masaru Koido koido
2
980
Development of an App for Intuitive AI Learning - Blockly Summit 2025
Avatar for Teba_eleven teba_eleven
0
110
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
10
3.8k
レガシーシステムの機能調査・開発におけるAI利活用
Avatar for takuya ohtonari takuya_ohtonari
0
590
プロダクト開発でも使おう 関数のオーバーロード
Avatar for yoiwamoto yoiwamoto
0
150
Use Perl as Better Shell Script
Avatar for karupanerura karupanerura
0
690
ktr0731/go-mcpでMCPサーバー作ってみた
Avatar for kashiwa takak2166
0
160
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
4
820

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
6
690
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
650
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
780
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k

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"