Day14: Slider 與列表互動

September 23, 2020

140

Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020

Tweet

More Decks by Kalan

See All by Kalan

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

0

780

選擇 Svelte 的三個理由 - JSDC

0

340

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

0

170

状態管理を楽にする道

1

370

Day25. 如何解析 HTML 語法

0

150

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

0

200

Svelte 如何編譯程式碼（1）

0

190

Day22. Svelte 經驗談

0

160

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

0

160

Other Decks in Programming

See All in Programming

CIを整備してメンテナンスを生成AIに任せる

0

510

0

120

Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai

21

10k

Jakarta EE Meets AI

0

570

202507_ADKで始めるエージェント開発の基本〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction

PRO

6

1.4k

バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス

1

320

それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks

PRO

17

3.6k

変化を楽しむエンジニアリング ~ いままでとこれから ~

0

660

DataformでPythonする / dataform-de-python

0

150

階層化自動テストで開発に機動力を

1

470

Vibe coding コードレビュー

0

400

AIのメモリー

12

1.2k

Featured

See All Featured

Optimising Largest Contentful Paint

37

3.4k

実際に使うSQLの書き方徹底解説 / pgcon21j-tutorial

PRO

182

54k

31

14k

A better future with KSS

238

17k

PRO

29

5.5k

Save Time (by Creating Custom Rails Generators)

PRO

31

1.3k

Testing 201, or: Great Expectations

45

7.6k

Design and Strategy: How to Deal with People Who Don’t "Get" Design

130

19k

Code Review Best Practice

69

19k

The Psychology of Web Performance [Beyond Tellerrand 2023]

49

2.9k

ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020

126

53k

Designing for Performance

610

69k

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"