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

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
0
150

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

Other Decks in Programming

See All in Programming
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
18
9k
Foundation Modelsを実装日本語学習アプリを作ってみた！
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
130
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
2
1.6k
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
190
When Dependencies Fail: Building Antifragile Applications in a Fragile World
Avatar for Selçuk Usta selcukusta
0
110
CSC305 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
Avatar for ternbusty ternbusty
3
260
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
320
三者三様 宣言的UI
Avatar for Keita Kagurazaka kkagurazaka
0
280
O Que É e Como Funciona o PHP-FPM?
Avatar for Marcel dos Santos marcelgsantos
0
210
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
150

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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"