作者forestluch (小強)
看板Web_Design
標題[問題] 有關<input type="range">
時間Fri Jan 10 10:32:46 2014
各位好
因為工作需求
需使用到一些3D繪圖的lib
但無奈 用coding的方式把參數帶進去 在執行之前實在很難意會
所以用html作為操作接介面的方式
用 <input type="range"> 的方式寫了很多slider來拉參數...
我參考這個網頁的做法
http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/
不過實際的運行環境是在行動裝置上
所以在PC上寫好的html介面丟到行動裝置後跟背景的程式串接
但 悲劇的事發生了
那個slider的滑桿 那個點 很難點
很難滑... 手指太粗 滑桿點太小
有什麼方法可以解決? 或者有其他套件能用嗎?
感謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.133.94.66
我後來用這個網頁的Jquery
http://demos.jquerymobile.com/1.2.1/docs/forms/slider/
但滑動起來的時候很卡
整個3D的shader部分在滑動的時候都會lag
之前不會
有其他解決方案嗎0.0
※ 編輯: forestluch 來自: 220.133.94.66 (01/10 18:32)
2F：→ averywu:CSS 無效嗎 @@ 01/10 19:22
我找到這個腳本
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: block;
background-color: #666;
opacity: 0.5;
width: 10px;
height: 10px;
}
其中設opacity有效
但看起來應該是大小的width和height卻沒有效
※ 編輯: forestluch 來自: 220.133.94.66 (01/10 20:06)
4F：→ averywu:Safari @OSX width/height 有效 01/10 23:21
謝謝 我的腳本就是從你那個連結裡找到拿來改的
當時放在Dreamweaver上改 結果沒有什麼用
原來放在ipad上是可以的
感謝
※ 編輯: forestluch 來自: 220.133.94.66 (01/13 09:40)
5F：推 SansWord:-webkit-slider-thumb 只有在 webkit 系列的 browser有用 01/15 11:03
6F：→ SansWord:也就是 Chrome, Safari, Mobile Safari, 和未來的 opera 01/15 11:04
7F：→ SansWord:IE 和 Firefox 上面就不能用了。 01/15 11:04
8F：→ lyforever:IE10 (ms-thumb), FF (moz-range-thumb) 01/15 14:40