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

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
0
140

Day14: Slider 與列表互動

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

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

Avatar for Kalan

Kalan

September 23, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
Avatar for Masahiko Sakakibara rdlabo
0
430
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction
Avatar for RisaTube risatube
PRO
6
1.4k
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
Avatar for Akira Suenami a_suenami
10
1.5k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
Avatar for shin1x1 shin1x1
1
930
QA x AIエコシステム段階構築作戦
Avatar for Osu osu
0
240
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
6
1.1k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
Avatar for Yuki Yata arfes0e2b3c
0
330
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
5
720
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
Avatar for ktr ktr_0731
3
950
Advanced Micro Frontends: Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
Avatar for 幡ヶ谷亭直吉 hiliteeternal
0
370
Strands Agents で実現する名刺解析アーキテクチャ
Avatar for omiya omiya0555
1
110

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.3k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k

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"