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
310
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
150
状態管理を楽にする道
kjj6198
1
330
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼（2）
kjj6198
0
170
Svelte 如何編譯程式碼（1）
kjj6198
0
170
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
140

Other Decks in Programming

See All in Programming
DMMオンラインサロンアプリのSwift化
hayatan
0
230
HTML/CSS超絶浅い説明
yuki0329
0
210
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
210
Immutable ActiveRecord
megane42
0
120
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region！
maroon1st
0
120
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
120
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
Azure AI Foundryのご紹介
qt_luigi
1
250
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.5k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
160
Linux && Docker 研修/Linux && Docker training
forrep
19
3.6k

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Raft: Consensus for Rubyists
vanstee
137
6.7k
RailsConf 2023
tenderlove
29
980
Writing Fast Ruby
sferik
628
61k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
A Philosophy of Restraint
colly
203
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
52k
A better future with KSS
kneath
238
17k

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"