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

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
0
140

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
780
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
340
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
170
状態管理を楽にする道
Avatar for Kalan kjj6198
1
370
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
140
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
190
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
190
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
150

Other Decks in Programming

See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.5k
第9回 情シス転職ミートアップ 株式会社IVRy（アイブリー）の紹介
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
320
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
2
1.4k
High-Level Programming Languages in AI Era -Human Thought and Mind-
Avatar for Hayato Ishida hayat01sh1da
PRO
0
770
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
530
AIともっと楽するE2Eテスト
Avatar for Yohei Maeda myohei
6
2.6k
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
280
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
Avatar for yosh_yumyum yoshyum
3
1k
プロダクト志向ってなんなんだろうね
Avatar for RightTouch righttouch
PRO
0
190
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
1
640
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
240
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
1
830

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k

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"