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

Day14: Slider 與列表互動

Kalan
September 23, 2020
Programming
0
120

Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
130
Rubyと自由とAIと
yotii23
6
1.9k
CloudNativePGを布教したい
nnaka2992
0
120
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
180
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.1k
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
760
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.6k

Featured

See All Featured
Visualization
eitanlees
146
15k
The Cost Of JavaScript in 2023
addyosmani
47
7.5k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Embracing the Ebb and Flow
colly
84
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
It's Worth the Effort
3n
184
28k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k

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"