$30 off During Our Annual Pro Sale. View Details »

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
0
160

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

Other Decks in Programming

See All in Programming
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
230
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
160
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
390
Findy AI+の開発、運用におけるMCP活用事例
Avatar for starfish719 starfish719
0
1.7k
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
160
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
430
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
300
マスタデータ問題、マイクロサービスでどう解くか
Avatar for Kato Keisuke kts
0
130
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.3k
PC-6001でPSG曲を鳴らすまでを全部NetBSD上の Makefile に押し込んでみた / osc2025hiroshima
Avatar for Izumi Tsutsui tsutsui
0
180
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
280

Featured

See All Featured
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
0
1.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
400
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
260
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
120
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
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"