Day14: Slider 與列表互動

September 23, 2020

160

Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020

Tweet

More Decks by Kalan

See All by Kalan

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

0

800

選擇 Svelte 的三個理由 - JSDC

0

370

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

0

190

状態管理を楽にする道

1

400

Day25. 如何解析 HTML 語法

0

160

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

0

210

Svelte 如何編譯程式碼（1）

0

210

Day22. Svelte 經驗談

0

180

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

0

170

Other Decks in Programming

See All in Programming

ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party

1

280

AIエージェントの設計で注意するべきポイント6選

5

2.4k

Graviton と Nitro と私

0

140

ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた

PRO

0

170

Giselleで作るAI QAアシスタント〜 Pull Requestレビューに継続的QAを

0

300

[AtCoder Conference 2025] LLMを使った業務AHCの上⼿な解き⽅

6

770

脳の「省エネモード」をデバッグする～System 1（直感）と System 2（論理）の切り替え～

PRO

0

120

Pythonではじめるオープンデータ分析〜書籍の紹介と書籍で紹介しきれなかった事例の紹介〜

3

610

HTTPプロトコル正しく理解していますか？〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜

2

460

これならできる！個人開発のすゝめ

PRO

0

130

LLMで複雑な検索条件アセットから脱却する！！生成的検索インタフェースの設計論

4

970

「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話

PRO

39

26k

Featured

See All Featured

How Software Deployment tools have changed in the past 20 years

0

30k

How to build a perfect <img>

0

4.7k

技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition

PRO

115

94k

From π to Pie charts

0

91

How STYLIGHT went responsive

100

6k

455

43k

First, design no harm

PRO

1

1.1k

svc-hook: hooking system calls on ARM64 by binary rewriting

1

30

ReactJS: Keep Simple. Everything can be a component!

666

130k

ラッコキーワードサービス紹介資料

0

1.8M

Rails Girls Zürich Keynote

95

14k

186

16k

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"