正文
rangehtml5,html的range
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
关于html5中的range滑块
那就用JS吧，亲。
现在像空间里面的滚动条都是用DIV+CSS+JS模拟的。你不妨学习相关知识。
满意请采纳吧
相关问答
Q1: html5中，input 的属性type="range"，样式怎样美化
/* range控件 */
input[type=range] {
display: block;
position: relative;
width: 480px;
height: 48px;
margin: 8px 0;
padding: 0 64px;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
input[type=range]:hover:before,
input[type=range]:hover:after {
color: #608000;
}
input[type=range]:hover::-webkit-slider-runnable-track {
background-color: #85b200;
}
input[type=range]:hover::-moz-range-track {
background-color: #85b200;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background-color: #85b200;
}
/*range前后图标*/
input[type=range]:before,
input[type=range]:after {
content: "";
display: block;
position: absolute;
top: 8px;
width: 32px;
height: 32px;
line-height: 32px;
font-size: 32px;
color: #000;
text-align: center;
font-family: "你的图标字体名称" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input[type=range]:before {
left: 16px;
}
input[type=range]:after {
right: 16px;
}
input[type=range]#sort_tra:before {
content: "\e000";
}
input[type=range]#sort_tra:after {
content: "\e001";
}
/*range中心圆点*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 18px;
width: 18px;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
margin-top: -7px;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
height: 18px;
width: 18px;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
input[type=range]::-ms-thumb {
-ms-appearance: none;
appearance: none;
height: 18px;
width: 18px;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
-ms-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
input[type=range]::slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 18px;
width: 18px;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
margin-top: -6px;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
/*range轨道*/
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background-color: #aaa;
border-radius: 4px;
cursor: pointer;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
background-color: #aaa;
border-radius: 4px;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 3px;
border-color: transparent;
color: transparent;
border-radius: 3px;
background: transparent;
cursor: pointer;
}
/*已达进度*/
input[type=range]::-ms-fill-lower {
background-color: #85b200;
}
/*未达进度*/
input[type=range]::-ms-fill-upper {
background-color: #aaa;
}
input[type=range]::-ms-ticks-before {
display: none;
}
input[type=range]::-ms-ticks-after {
display: none;
}
不包含range的标题，前后图标用的字体图标，可以自行更换。经兼容测试，进度效果仅在IE9及以上版本有效（不影响实际使用）。
Chromium浏览器效果如下：
IE9及以上：
Q2: HTML5 input range 手机端点击无效
这个你在手机端，必须要学会touch事件。
下面有段代码，你可以参考下，通过判断touch事件的位置来达到您需要的效果
function imgreset(){
$(this).css3Animate({
width: imgoldw+"px",
//x:0,
//y:0,
time: "0ms",
callback: function () {
pagex1_s=null;pagey1_s=null;pagex2_s=null;pagey2_s=null;pagex1_e=null;pagey1_e=null;
pagex2_e=null;pagey2_e=null;pagexm1_s=null;pageym1_s=null;pagexm1_e=null;pageym1_e=null;
dm=0;dn=0;
imgneww=imgoldw
}
});
}
var imgoldw=320;//获取图片寛度
var imglength=$(".imgbox").length;//获取图片个数
var demos = document.getElementById("container"),
spirit, startScale, startRotation;
var dm=0,dn=0,imgneww=imgoldw,ismove=false,pic_c=0;
var body_w=$("body").width();
var body_h=$("body").height();
var pagex1_s,pagey1_s,pagex2_s,pagey2_s,pagex1_e,pagey1_e,pagex2_e,pagey2_e,pagexm1_s,pageym1_s,pagexm1_e,pageym1_e;
function touchStart(e) {
//e.stopPropagation();
e.preventDefault();
if(e.touches.length == 1){
ismove=true;
var touch1 = e.touches[0];
pagexm1_s = touch1.pageX;
pageym1_s = touch1.pageY;
}
if (e.touches.length == 2){
var touch1 = e.touches[0];
pagex1_s = touch1.pageX;
pagey1_s = touch1.pageY;
var touch2 = e.touches[1];
pagex2_s = touch2.pageX;
pagey2_s = touch2.pageY;
left = Math.min(pagex1_s, pagex2_s),
top = Math.min(pagey1_s, pagey2_s),
width = Math.abs(pagex1_s - pagex2_s),
height = Math.abs(pagey1_s - pagey2_s);
}
}
function touchMove(e){
//e.stopPropagation();
e.preventDefault();
if (ismovee.touches.length == 1){
//单点触摸
var touch1 = e.touches[0],
pagexm1_e = touch1.pageX,
pageym1_e = touch1.pageY,
//移动了多少
dx=pagexm1_e-pagexm1_s,
dy=pageym1_e-pageym1_s;
//是多少
dm=dx+dm;
dn=dy+dn;
if(imgneww==imgoldw){
$(this).css3Animate({
x:dm,
//y:dn,
time: "0ms",
callback: function () {
}
});
//如果图未放大，则执行翻页
}else{
//如果图片已经被放大，则可以拖动
$(this).css3Animate({
x:dm,
y:dn,
time: "0ms",
callback: function () {
//记录新位置
}
});
}
pagexm1_s=pagexm1_e,pageym1_s=pageym1_e;
}
if (e.touches.length == 2){
//多点触摸
var touch1 = e.touches[0];
pagex1_e = touch1.pageX;
pagey1_e = touch1.pageY;
var touch2 = e.touches[1];
pagex2_e = touch2.pageX;
pagey2_e = touch2.pageY;
//计算两点开始距离 old
var oldx=Math.abs(pagex1_s-pagex2_s),
oldy=Math.abs(pagey1_s-pagey2_s),
//计算两点开始距离 new
newx=Math.abs(pagex1_e-pagex2_e),
newy=Math.abs(pagey1_e-pagey2_e);
if(oldxnewxoldynewy){
var imgw=$(this).width();//获取图片寛度
resizex=oldx-newx;//缩小多少
var resizey=oldy-newy;//缩小多少
if(imgwimgoldw){
$(this).css3Animate({
width: imgneww-resizex+"px",
x:dm,
y:dn,
time: "0ms",
callback: function () {
}
});
imgneww=imgneww-resizex;
};
}else{
var imgw=$(this).width();//获取图片寛度
var resizex=Math.abs(oldx-newx);
var resizey=Math.abs(oldy-newy);//缩小多少
if(imgw640){
$(this).css3Animate({
width: imgneww+resizex+"px",
x:dm,
y:dn,
time: "0ms",
callback: function () {
}
});
imgneww=imgneww+resizex;
}
}
}
pagex1_s=pagex1_e,pagey1_s=pagey1_e,pagex2_s=pagex2_e,pagey2_s=pagey2_e;
}
function touchEnd(e) {
e.preventDefault();
var imglength=$(".imgbox").length;
var id=parseInt($(this).attr("id").substr(9));
if(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=imglength-1){
$.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}else if(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=0){
$.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}else{
if(ismoveimgneww==imgoldw){
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}
}
ismove=false;
}
function gestureEnd(e) {
e.preventDefault();
if (!spirit) return;
canvas.removeChild(spirit);
spirit = null;
startScale = null;
startRotation = null;
}
/* $(".imgbox img").bind("touchstart", touchStart, false);
$(".imgbox img").bind("touchmove", touchMove, false);
$(".imgbox img").bind("touchend", touchEnd, false);
$(".imgbox img").bind("gestureend", gestureEnd, false);
$(".imgbox img").bind("tap", imgreset, false);
*/
Q3: HTML5--Range对象概念
一个Range对象代表页面上一段连续的区域。通过Range对象，可以获取或修改页面上的任何区域。
选取一块区域
setStart表示某个节点的range对象的起点位置，
setEnd表示某个节点的range对象的终点位置
setStartBefore:表示用于将某个节点的起点位置设置为range对象的起点位置。
setStartAfter:表示用于将某个节点的终点位置设置为range对象的起点位置。
setEndBefore:表示用于将某个节点的起点位置设置为range对象的终点位置。
setEndAfter:表示用于将某个节点的终点位置设置为range对象的终点位置。
Q4: html5 range 样式怎么设置起始结束
CSS代码：
input { font-size: 14px; font-weight: bold; }
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
output {
display: block;
font-size: 5.5em;
font-weight: bold;
}
HTML代码：
form method="post"
h4音量控制/h4
input type="range" name="range" min="0" max="10" step="1" value="" /
output name="result" /output
/form
JS代码：
(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
// 检测浏览器是否是足够酷
// 识别range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');
// 设置初始值
// 无论是否本地存储了，都设置值为5
range.value = cachedRangeValue;
result.value = cachedRangeValue;
// 当用户选择了个值，更新本地存储
range.addEventListener("mouseup", function() {
alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
}, false);
// 滑动时显示选择的值
range.addEventListener("change", function() {
result.value = range.value;
}, false);
})();
Q5: HTML5 Input类型里面的Range问题
在HTMLhead标签里加入meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /编码格式设置成UTF-8 用在网页上可以同一页面显示中文简体繁体及其它语言(如日文，韩文)
