Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
200
0

Day14: Slider 與列表互動

◼︎ 本集內容：客製化 Slider 與列表的互動練習

透過 Svelte 來實作一個客製化的 Slider，並且盡可能地涵蓋多一點細節。

Avatar for Kalan

Kalan

September 23, 2020

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
850
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
450
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
250
状態管理を楽にする道
Avatar for Kalan kjj6198
1
460
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
210
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
250
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
270
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
250
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
230

Other Decks in Programming

See All in Programming
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
150
AHC070解法紹介
Avatar for eijirou eijirou
0
150
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
250
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
120
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
600
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
390
Findy - エンジニア向け会社紹介/Findy Company Deck
Avatar for Findy findyinc
6
400k
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
430
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
130
パズルゲームの作り方 / how to make puzzle games
Avatar for kaityo256 kaityo256
PRO
2
260
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
460
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
250

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
240
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
550
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
590
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
540
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.9k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k

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"