5款不同效果jQuery滑块选值特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 5款不同效果jQuery滑块选值特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>5款不同效果jQuery滑块选值特效</title>
<link href="normalize.min.css" rel="stylesheet">
<link href="demo/base.css" rel="stylesheet">
<link href="dist/srs.css" rel="stylesheet">
<script src="dist/jquery.js"></script>
<script src="dist/srs.js"></script>
</head>
<body>
<div class="wrap">
	<label for="example-1">Example 1</label>
	<input id="example-1" name="example-1" placeholder="0 - 100" type="number" min="0" max="100" step="1" value="50" data-color="#6324B5" class="srs">
	<label for="example-2">Example 2</label>
	<input id="example-2" name="example-2" placeholder="50 - 500" type="number" min="50" max="200" step="10" value="170" data-color="#1C8EC5" class="srs">
	<label for="example-3">Example 3</label>
	<input id="example-3" name="example-3" placeholder="1,000 - 100,000" type="number" min="1000" max="100000" step="1000" value="10000" data-color="#12C7AC" class="srs">
	<label for="example-4">Example 4</label>
	<input id="example-4" name="example-4" placeholder="0 - 10" type="number" min="0" max="10" step="0.05" value="5" data-decimals="2" data-color="#B59824" class="srs">
	<label for="example-5">Example 5</label>
	<input id="example-5" name="example-5" placeholder="0 - 2,000" type="number" min="0" max="2,000" step="100" value="0" data-color="#B53A24" class="srs">
</div>
</body>
</html>

JS代码(srs.js):

(function(){
	!function($){
	var t;
	return t=function(){
	function t(t){
	var i,s,e,u,h,n;
	this.input=t,this.input.hide(),this.min=null!=(i=this.input.attr("min"))?i:0,this.max=null!=(s=this.input.attr("max"))?s:100,this.step=null!=(e=this.input.attr("step"))?e:1,this.value=null!=(u=this.input.attr("value"))?u:(this.max-this.min)/2+this.min,this.decimals=null!=(h=this.input.data("decimals"))?h:0,this.color=null!=(n=this.input.data("color"))?n:"#333",this.min=parseFloat(this.removeCommas(this.min)),this.max=parseFloat(this.removeCommas(this.max)),this.step=parseFloat(this.removeCommas(this.step)),this.value=parseFloat(this.removeCommas(this.value)),this.decimals=parseFloat(this.removeCommas(this.decimals)),this.slider=$("<div>").addClass("srs-slider").insertAfter(this.input),this.minus=$("<div><span>-</span></div>").addClass("srs-minus").appendTo(this.slider),this.plus=$("<div><span>+</span></div>").addClass("srs-plus").appendTo(this.slider),this.track=$("<div>").addClass("srs-track").appendTo(this.slider),this.thumb=$("<div><span>").addClass("srs-thumb").appendTo(this.track),this.bubble=$("<div><span>").addClass("srs-bubble").appendTo(this.thumb).hide(),this.minus.css("color",this.color),this.plus.css("color",this.color),this.thumb.css("background",this.color),this.dragging=!1,this.limit=1e3,this.thumbOffset=this.thumb.outerWidth()/2,this.thumbNumber=this.thumb.find("span").first(),this.bubbleNumber=this.bubble.find("span").first(),this.setValue(this.value),this.positionThumb(this.value),(this.value>=this.limit||this.decimals>0)&&this.toggleBubble(!0),this.thumb.on("mousedown touchstart",function(t){
	return function(i){
	return t.dragging?void 0:(i.preventDefault(),t.dragging=!0,t.value>=t.limit||t.decimals>0||t.toggleBubble(!0),t.dragThumb(i.pageX))}
}
(this)),$("html").on("mousemove touchmove",function(t){
	return function(i){
	var s;
	return t.dragging?(i.preventDefault(),"touchmove"===i.type?(s=i.originalEvent.touches[0],t.dragThumb(s.pageX)):($("html").css({
	cursor:"ew-resize"}
),t.dragThumb(i.pageX))):void 0}
}
(this)).on("mouseup touchend",function(t){
	return function(i){
	return t.dragging?(i.preventDefault(),t.dragging=!1,t.value>=t.limit||t.decimals>0||t.toggleBubble(!1),$("html").css({
	cursor:"default"}
)):void 0}
}
(this)),this.minus.on("click",function(t){
	return function(i){
	var s;
	return i.preventDefault(),s=t.value-t.step,s=Math.max(t.min,s),t.setValue(s),t.positionThumb(s),t.value>=t.limit||t.decimals>0?t.toggleBubble(!0):t.toggleBubble(!1)}
}
(this)),this.plus.on("click",function(t){
	return function(i){
	var s;
	return i.preventDefault(),s=t.value+t.step,s=Math.min(t.max,s),t.setValue(s),t.positionThumb(s),t.value>=t.limit||t.decimals>0?t.toggleBubble(!0):t.toggleBubble(!1)}
}
(this))}
return t.prototype.toggleBubble=function(t){
	return t?(this.bubble.stop(!0,!0).fadeIn(200),this.thumbNumber.stop(!0,!0).fadeOut(200)):(this.bubble.stop(!0,!0).fadeOut(200),this.thumbNumber.stop(!0,!0).fadeIn(200))}
,t.prototype.dragThumb=function(t){
	var i,s,e;
	return s=this.track.offset().left+this.thumbOffset,i=this.track.offset().left+this.track.outerWidth()-this.thumbOffset,e=Math.max(s,t),e=Math.min(i,e),this.setValue(this.calcValue()),this.thumb.offset({
	left:e-this.thumbOffset}
)}
,t.prototype.normalize=function(t,i,s){
	return(t-i)/(s-i)}
,t.prototype.addCommas=function(t){
	return t.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")}
,t.prototype.removeCommas=function(t){
	return t.toString().replace(/,/g,"")}
,t.prototype.calcValue=function(){
	var t;
	return t=this.normalize(this.thumb.position().left,0,this.track.outerWidth()-2*this.thumbOffset),t*(this.max-this.min)+this.min}
,t.prototype.setValue=function(t){
	var i;
	return this.value=Math.round((t-this.min)/this.step)*this.step+this.min,this.input.val(this.value),i=this.addCommas(this.value.toFixed(this.decimals)),this.bubbleNumber.text(i),this.value>=this.limit||this.decimals>0?this.thumbNumber.text(""):this.thumbNumber.text(i)}
,t.prototype.positionThumb=function(t){
	var i;
	return i=this.normalize(t,this.min,this.max),this.thumb.offset({
	left:Math.round(i*(this.track.outerWidth()-2*this.thumbOffset)+this.track.offset().left)}
)}
,t}
(),$.extend($.fn,{
	srs:function(){
	return new t($(this))}
}
),$(function(){
	return $(".srs").each(function(){
	return $(this).srs()}
)}
)}
(this.jQuery)}
).call(this);

CSS代码(base.css):

html,body{font-family:'Roboto',sans-serif;font-size:16px;color:#222;background:#fafafa}
.wrap{margin:150px auto;max-width:600px}
h1{font-weight:400;font-size:35px;text-align:center}
label{display:block;font-weight:300;font-size:30px;text-align:center}

附件:下载该文件资源,减少时间成本(增值服务)