关于html5中的range滑块

那就用JS吧，亲。

创新互联公司主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务博望,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

现在像空间里面的滚动条都是用DIV+CSS+JS模拟的。你不妨学习相关知识。

满意请采纳吧

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及以上：

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);

*/

HTML5--Range对象概念

一个Range对象代表页面上一段连续的区域。通过Range对象，可以获取或修改页面上的任何区域。

选取一块区域

setStart表示某个节点的range对象的起点位置，

setEnd表示某个节点的range对象的终点位置

setStartBefore:表示用于将某个节点的起点位置设置为range对象的起点位置。

setStartAfter:表示用于将某个节点的终点位置设置为range对象的起点位置。

setEndBefore:表示用于将某个节点的起点位置设置为range对象的终点位置。

setEndAfter:表示用于将某个节点的终点位置设置为range对象的终点位置。

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);

})();

HTML5 Input类型里面的Range问题

在HTMLhead标签里加入meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /编码格式设置成UTF-8 用在网页上可以同一页面显示中文简体繁体及其它语言(如日文，韩文)

分享名称：rangehtml5,html的range
文章源于：http://csdahua.cn/article/hosisp.html