作者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