Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020

More Decks by Kalan

See All by Kalan

單頁式應用中的無障礙設計

0

830

選擇 Svelte 的三個理由 - JSDC

0

420

Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21

0

230

状態管理を楽にする道

1

440

Day25. 如何解析 HTML 語法

0

190

Day24. Svelte 如何編譯程式碼（2）

0

240

Svelte 如何編譯程式碼（1）

0

250

Day22. Svelte 經驗談

0

220

Day18. UI 實戰篇 - 圖片檢視器

0

210

Other Decks in Programming

See All in Programming

komatsuna「分散システムにおけるバグ分析手法」

0

270

Dockerfile CMD for Node.js

0

120

ソフトウェアラスタライザ

1

500

レビュー履歴をAIに食わせて、 Compose移行を加速するs

0

190

FastAPI の並行処理モデルを完全に理解する

8

2.8k

コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo

0

180

複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話

1

720

実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system

0

7.6k

まずはプロンプトガイドを読もう、話はそれからだ

1

200

仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」

4

1.7k

PostgreSQL 18で考えるUUID主キー

0

500

いまどきの Codex で開発する visionOS アプリの開発スタイルについて

0

160

Featured

See All Featured

Principles of Awesome APIs and How to Build Them.

128

18k

Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)

1

350

The Limits of Empathy - UXLibs8

1

610

Evolving SEO for Evolving Search Engines

0

260

4 Signs Your Business is Dying

187

23k

The Spectacular Lies of Maps

PRO

1

940

Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster

1

2.5k

sira's awesome portfolio website redesign presentation

0

340

Balancing Empowerment & Direction

6

1.2k

Let's Do A Bunch of Simple Stuff to Make Websites Faster

508

140k

Reflections from 52 weeks, 52 projects

356

21k

Optimizing for Happiness

378

71k

Transcript

第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day14 - UI 實戰篇：客製化 Slider 搭配列表互動
第 12 屆 IT 鐵⼈賽使⽤情景 - 有條件地搜尋列表
第 12 屆 IT 鐵⼈賽 Slider 實作功能能⽤ input=range 就不要⾃⼰做
選取範圍、可以透過滑鼠拉動可以點擊長條部分調整數字
第 12 屆 IT 鐵⼈賽列表實作功能可以順利顯⽰列表在篩選條件有變化時，做 Transition 效果
第 12 屆 IT 鐵⼈賽更多功能可以透過鍵盤操作數字（左、右）加入 FLIP Accessibility
⽀援 aria-valuemind, aria-valuemax, aria-valuenow role="slider", aria-orientation="horizontal"