探索HTML input 的 range 屬性 – 創建自訂滑動輸入欄位

緣起

在撰寫一個圖片轉換功能時，因為有一個參數是轉換的品質。

故想要找一個可以滑動的比例，像是 60%到100%那種的，故上網找找靈感。

想不到被我找到了這個，原來input內建的type就有支援了!

這可真是令人意想不到，對input的印象就只有常用到的 text、password、submit 這幾種

那讓我們來看看這個 type 該如何使用吧

基本介紹

除了與 input 共用的參數外， range 還有自己的額外參數，分別是

• list – 用於顯示建議值
• max – 最大值
• min – 最小值
• step – 自訂滑動時的間距

讓我們來試試看一個簡單的，如果我們需要一個 1 到 10 的音量調整器

我們可以這樣寫

See the Pen range_1 by story zyra (@story-zyra) on CodePen.

大家可以看到，我們定義了min 跟 max 值，故整個input值就會介於兩者之間

然後如果沒對value做設定，預設會是 min 跟 max 的中間值

但還是缺了點什麼，不僅看不到目前到底是多少，也應該對間距進行設定

修改後如下:

See the Pen range_2 by story zyra (@story-zyra) on CodePen.

在這裡，我們針對input寫了事件監聽器，讓上面的文字可以動態調整

還讓每個間距為1，更加符合音量調整的題目

另外初始值為6，則是因為 (0+10)/2 = 5.5，但因為都是用整數設定，故會被四捨五入到整數位

顯示刻度

快可以收工了，現在只需要加上最後的一小段 – 顯示刻度

為了顯示刻度，就會用額外參數的 list

See the Pen range_3 by story zyra (@story-zyra) on CodePen.

可以看到datalist中的option 設定value 並對應回範圍內，就會顯示出刻度 ➡ 只是刻度不是文字

文字靠的是option中的label，並透過css 的 justify-content: space-between

來平均顯示在下方，所以這才是為什麼範例是 1 4 7 10 的原因

就是因為間隔相等，都是3，故可以平均的顯示 (當然從1寫到10也可以，但容我偷懶下)

結論

寫程式永遠都是在學習的路上，加加減減寫程式的5、6年，卻沒用過這個屬性

在某些需調整的地方感覺蠻好用的，比起單純的文字框來讓人來的友善多了

(工程師可能不在意外表，能用就好了，但… User肯定不是這麼想的啊啊啊)

參考文章 :

• <input type=”range”> – HTML: HyperText Markup Language | MDN (mozilla.org)

🧡如果這篇文章有幫上你的一點點忙，那是我的榮幸

🧡幫我點一個小小的廣告或留言，都是對我的支持

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !

一些隨機文章