iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
自我挑戰組

html與css粗淺新手入門教學系列 第 29

html 音量拉桿

今天來說要如何做出一個可以左右滑的拉桿,程式碼範例如下

        <input type="range" min="0" max="100">volume

創造出一個最小值為0,最大值為100的拉桿
https://ithelp.ithome.com.tw/upload/images/20210929/20140086Z0HEGWRKH4.jpg
預設值沒有特別定義的話會出現在中間,我們加一個value參數將預設值改為80

        <input type="range" min="0" max="100" value="80">volume

https://ithelp.ithome.com.tw/upload/images/20210929/20140086RBEtmpFrtg.jpg
加上step參數可以改變每次移動的格數

        <input type="range" min="0" max="100" value="80" step="10">volume

設定後每次移動都會以10為單位
截圖無法看出效果,各位可以實際操作看看


上一篇
html 下拉式選單
下一篇
html 下拉式選單內的群組
系列文
html與css粗淺新手入門教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言