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

Day14: Slider 與列表互動

Kalan
September 23, 2020
Programming
0
130

Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.8k
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
220
Qiita Bash
mercury_dev0517
1
190
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
880
PHPのガベージコレクションを深掘りしよう
rinchoku
0
260
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
990
List とは何か？ / PHPerKaigi 2025
meihei3
0
710
Java 24まとめ / Java 24 summary
kishida
3
460
Signal-Based Data Fetching With the New httpResource
manfredsteyer
PRO
0
160
メモリウォールを超えて：キャッシュメモリ技術の進歩
kawayu
0
1.9k
SwiftUI API Design Lessons
niw
1
260
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Speed Design
sergeychernyshev
29
880
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Why Our Code Smells
bkeepers
PRO
336
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Music & Morning Musume
bryan
47
6.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.1k

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"