Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day14: Slider 與列表互動
Search
Kalan
September 23, 2020
Programming
0
120
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
300
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
150
状態管理を楽にする道
kjj6198
1
320
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
170
Svelte 如何編譯程式碼(1)
kjj6198
0
160
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
130
Other Decks in Programming
See All in Programming
php-conference-japan-2024
tasuku43
0
330
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
190
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.7k
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
210
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
480
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
850
Spatial Rendering for Apple Vision Pro
warrenm
0
110
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
500
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
190
Go の GC の不得意な部分を克服したい
taiyow
3
800
暇に任せてProxmoxコンソール 作ってみました
karugamo
2
720
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
KATA
mclloyd
29
14k
What's in a price? How to price your products and services
michaelherold
243
12k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Designing Experiences People Love
moore
138
23k
Code Review Best Practice
trishagee
65
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
For a Future-Friendly Web
brad_frost
175
9.4k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day14 - UI 實戰篇:客製化 Slider 搭配列表互動
第 12 屆 IT 鐵⼈賽 使⽤情景 - 有條件地搜尋列表
第 12 屆 IT 鐵⼈賽 Slider 實作功能 能⽤ input=range 就不要⾃⼰做
選取範圍、可以透過滑鼠拉動 可以點擊長條部分調整數字
第 12 屆 IT 鐵⼈賽 列表實作功能 可以順利顯⽰列表 在篩選條件有變化時,做 Transition 效果
第 12 屆 IT 鐵⼈賽 更多功能 可以透過鍵盤操作數字(左、右) 加入 FLIP Accessibility
⽀援 aria-valuemind, aria-valuemax, aria-valuenow role="slider", aria-orientation="horizontal"