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
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
300
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
150
状態管理を楽にする道
kjj6198
1
330
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
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
190
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
最近のVS Codeで気になるニュース 2025/01
74th
1
110
return文におけるstd::moveについて
onihusube
1
1.4k
2025.01.17_Sansan × DMM.swift
riofujimon
2
570
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.8k
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.9k
Rubyでつくるパケットキャプチャツール
ydah
0
180
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点

eiganken
1
450
Beyond ORM
77web
11
1.6k
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120

Featured

See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Faster Mobile Websites
deanohume
305
30k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
A designer walks into a library…
pauljervisheath
205
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
It's Worth the Effort
3n
183
28k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Making Projects Easy
brettharned
116
6k
Bash Introduction
62gerente
610
210k

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"