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
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
190
事業戦略を理解してソフトウェアを設計する
Avatar for 増田 亨 masuda220
PRO
22
5.9k
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
Avatar for lni_T lnit
1
160
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
110
[初登壇＠jAZUG]アプリ開発者が気になるGoogleCloud/Azure＋wasm/wasi
Avatar for asaringo asaringo
0
130
F#で自在につくる静的ブログサイト - 関数型まつり2025
Avatar for pizzacat83 pizzacat83
0
290
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
Avatar for Kenji Kazumura kazumura
1
170
TypeScript LSP の今までとこれから
Avatar for Yosuke Kurami quramy
1
500
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
110
インターフェース設計のコツとツボ
Avatar for おぎ togishima
2
700
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
540
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
2
490

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.9k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
50
8.3k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k

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"