以下是 ios7滑块插件Powerange特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>ios7滑块插件Powerange</title>
<link rel="stylesheet" href="dist/demo.css" />
<link rel="stylesheet" href="dist/powerange.css" />
<link href="http://fonts.googleapis.com/css?family=Maven+Pro:400" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<section class="content">
<div class="box">
<h2>Examples</h2>
<div class="example">
<h3>Basic style customization</h3>
<p>You are free to customize the range slider as much as you wish, using only CSS.</p>
<p>The width (for horizontal) or height (for vertical) of the slider, depends on the container in which it's placed and take 100%.</p>
<p>Play around with the <strong>background-color</strong> of <strong>.range-bar</strong> and <strong>.range-quantity</strong>, add a <strong>background-image</strong> to <strong>.range-handle</strong>, add some nice <strong>background-image</strong> to <strong>.range-min</strong> and <strong>.range-max</strong>, get use of the <strong>hideRange</strong> option and you may end up with something as fun as this:</p>
<div class="slider-wrapper">
<input type="text" class="js-customized" />
</div>
<p>The sky is the limit.</p>
<p class="note">Hint: Use the <strong>klass</strong> option to add an additional class to the slider and apply different style to it</p>
</div>
<div class="example">
<h3>Minimum, maximum and start values</h3>
<p>Changing your default <strong>min</strong>, <strong>max</strong> and <strong>start</strong> values is pretty easy. The start value has to be a number in your min-max interval, otherwise it takes the value of either <strong>min</strong> or <strong>max</strong>, depending on which is closer. Negative values are supported as well.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { min: <span class="boolean">16</span>, max: <span class="boolean">256</span>, start: <span class="boolean">128</span> });</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-min-max-start" />
</div>
</div>
<div class="example">
<h3>Decimal</h3>
<p>Display decimal number with 2 characters after the decimal point.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { decimal: <span class="boolean">true</span> });</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-decimal" />
<label class="display-box-label">Value:</label>
<div id="js-display-decimal" class="display-box"></div>
</div>
</div>
<div class="example">
<h3>Slider step</h3>
<p>You can change the step with which the handle moves, using the <strong>step</strong> option.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { step: <span class="boolean">10</span> });</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-step" />
</div>
</div>
<div class="example">
<h3>Hide range values</h3>
<p>You can hide the min and max values, by using the <strong>hideRange</strong> option.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { hideRange: <span class="boolean">true</span> });</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-hiderange" />
</div>
</div>
<div class="example">
<h3>Disabled</h3>
<p>Disable the range slider and change it's default <strong>disabledOpacity</strong> if needeed.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { disable: <span class="boolean">true</span>, disabledOpacity: <span class="boolean">0.75</span> });</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-disabled" />
</div>
</div>
<div class="example">
<h3>Horizontal and vertical slider</h3>
<p>The default Powerange slider is horizontal. However, you can make it vertical, by setting <strong>vertical: true</strong>.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { vertical: <span class="boolean">true</span> });</div>
</div>
</pre>
<div class="slider-wrapper vertical-wrapper">
<input type="text" class="js-vertical" />
</div>
</div>
<div class="example">
<h3>Checking state</h3>
<p>Check the current value of the range slider, by looking at the value of the text input element.</p>
<p>On click:</p>
<pre>
<div class="script">
<div><span class="specials">var</span> clickInput <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-check-click'</span>)</div>
<div> , clickButton <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-check-click-button'</span>)</div>
<br />
<div>clickButton.addEventListener(<span class="value">'click'</span>, <span class="specials">function</span>() {</div>
<div> <span class="single">alert</span>(clickInput.<span class="boolean">value</span>);</div>
<div>});</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-check-click" />
<button class="js-check-click-button button small-button">Check value</button>
</div>
<p>On change:</p>
<pre>
<div class="script">
<div><span class="specials">var</span> changeInput <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-check-change'</span>);</div>
<br />
<div><span class="single">changeInput</span>.<span class="name">onchange</span> = <span class="specials">function</span>() {</div>
<div> <span class="single">document</span>.<span class="specials">getElementById</span>(<span class="value">'js-display-change'</span>).innerHTML = changeInput.<span class="boolean">value</span>;</div>
<div>};</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-check-change" />
<label class="display-box-label">Value:</label>
<div id="js-display-change" class="display-box"></div>
</div>
</div>
<div class="example">
<h3>Callback</h3>
<p>The callback function is invoked on slider initialization and on slider handle movement. It's very appropriate for displaying the current value in another element.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> elem <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-range'</span>);</div>
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem);</div>
<br />
<div><span class="specials">function</span> <span class="name">displayValue</span>() {</div>
<div> <span class="single">document</span>.<span class="specials">getElementById</span>(<span class="value">'display-box'</span>).innerHTML = elem.<span class="boolean">value</span>;</div>
<div>}</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-callback" />
<label class="display-box-label">Value:</label>
<div id="js-display-callback" class="display-box"></div>
</div>
</div>
<div class="example">
<h3>Interacting with another elements</h3>
<p>Just a simple example of how you can interact with an element, when changing the slider value. In this case, we change the opacity of an awesome power ranger mask.</p>
<pre>
<div class="script">
<div><span class="specials">var</span> elem <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-range'</span>);</div>
<div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { callback: setOpacity, decimal: <span class="boolean">true</span>, min: <span class="boolean">0</span>, max: <span class="boolean">1</span>, start: <span class="boolean">1</span> });</div>
<br />
<div><span class="specials">function</span> <span class="name">setOpacity</span>() {</div>
<div> <span class="single">document</span>.querySelector(<span class="value">'.js-change-opacity'</span>).<span class="boolean">style</span>.opacity = elem.<span class="boolean">value</span>;</div>
<div>}</div>
</div>
</pre>
<div class="slider-wrapper">
<input type="text" class="js-opacity" />
<div class="powerranger js-change-opacity"></div>
</div>
</div>
</div>
<script src="dist/powerange.min.js"></script>
<script type="text/javascript">
// Basic customization.
var cust = document.querySelector('.js-customized');
var initCust = new Powerange(cust, { hideRange: true, klass: 'power-ranger', start: 60 });
// Min, max, start.
var vals = document.querySelector('.js-min-max-start');
var initVals = new Powerange(vals, { min: 16, max: 256, start: 128 });
// Decimal.
var dec = document.querySelector('.js-decimal');
var initDec = new Powerange(dec, { decimal: true, callback: displayDecimalValue, max: 50, start: 19.12 });
function displayDecimalValue() {
document.getElementById('js-display-decimal').innerHTML = dec.value;
}
// Step.
var stp = document.querySelector('.js-step');
var initStp = new Powerange(stp, { start: 50, step: 10 });
// Hide range.
var hide = document.querySelector('.js-hiderange');
var initHideRange = new Powerange(hide, { hideRange: true, start: 70 });
// Disabled.
var disabled = document.querySelector('.js-disabled');
var initDisabled = new Powerange(disabled, { disable: true, disabledOpacity: 0.75, start: 30 });
// Vertical.
var vert = document.querySelector('.js-vertical');
var initVert = new Powerange(vert, { start: 80, vertical: true });
// Checking state.
// On click.
var clickInput = document.querySelector('.js-check-click')
, clickButton = document.querySelector('.js-check-click-button')
, initClickInput = new Powerange(clickInput, { start: 20 });
clickButton.addEventListener('click', function() {
alert(clickInput.value);
});
// On change.
var changeInput = document.querySelector('.js-check-change')
, initChangeInput = new Powerange(changeInput, { start: 70 });
changeInput.onchange = function() {
document.getElementById('js-display-change').innerHTML = changeInput.value;
};
// Callback.
var clbk = document.querySelector('.js-callback');
var initClbk = new Powerange(clbk, { callback: displayValue, start: 88 });
function displayValue() {
document.getElementById('js-display-callback').innerHTML = clbk.value;
}
// Interacting with elements.
var opct = document.querySelector('.js-opacity');
var initOpct = new Powerange(opct, { callback: setOpacity, decimal: true, min: 0, max: 1, start: 1 });
function setOpacity() {
document.querySelector('.js-change-opacity').style.opacity = opct.value;
}
</script>
</body>
</html>JS代码(powerange.min.js):
(function(){
function e(t,s,n){
var i=e.resolve(t);
if(null==i){
n=n||t,s=s||"root";
var o=Error('Failed to require "'+n+'" from "'+s+'"');
throw o.path=n,o.parent=s,o.require=!0,o}
var r=e.modules[i];
if(!r._resolving&&!r.exports){
var a={
}
;
a.exports={
}
,a.client=a.component=!0,r._resolving=!0,r.call(this,a.exports,e.relative(i),a),delete r._resolving,r.exports=a.exports}
return r.exports}
e.modules={
}
,e.aliases={
}
,e.resolve=function(t){
"/"===t.charAt(0)&&(t=t.slice(1));
for(var s=[t,t+".js",t+".json",t+"/index.js",t+"/index.json"],n=0;
s.length>n;
n++){
var t=s[n];
if(e.modules.hasOwnProperty(t))return t;
if(e.aliases.hasOwnProperty(t))return e.aliases[t]}
}
,e.normalize=function(e,t){
var s=[];
if("."!=t.charAt(0))return t;
e=e.split("/"),t=t.split("/");
for(var n=0;
t.length>n;
++n)".."==t[n]?e.pop():"."!=t[n]&&""!=t[n]&&s.push(t[n]);
return e.concat(s).join("/")}
,e.register=function(t,s){
e.modules[t]=s}
,e.alias=function(t,s){
if(!e.modules.hasOwnProperty(t))throw Error('Failed to alias "'+t+'",it does not exist');
e.aliases[s]=t}
,e.relative=function(t){
function s(e,t){
for(var s=e.length;
s--;
)if(e[s]===t)return s;
return-1}
function n(s){
var i=n.resolve(s);
return e(i,t,s)}
var i=e.normalize(t,"..");
return n.resolve=function(n){
var o=n.charAt(0);
if("/"==o)return n.slice(1);
if("."==o)return e.normalize(i,n);
var r=t.split("/"),a=s(r,"deps")+1;
return a||(a=0),n=r.slice(0,a+1).join("/")+"/deps/"+n}
,n.exists=function(t){
return e.modules.hasOwnProperty(n.resolve(t))}
,n}
,e.register("component-event/index.js",function(e){
var t=window.addEventListener?"addEventListener":"attachEvent",s=window.removeEventListener?"removeEventListener":"detachEvent",n="addEventListener"!==t?"on":"";
e.bind=function(e,s,i,o){
return e[t](n+s,i,o||!1),i}
,e.unbind=function(e,t,i,o){
return e[s](n+t,i,o||!1),i}
}
),e.register("component-query/index.js",function(e,t,s){
function n(e,t){
return t.querySelector(e)}
e=s.exports=function(e,t){
return t=t||document,n(e,t)}
,e.all=function(e,t){
return t=t||document,t.querySelectorAll(e)}
,e.engine=function(t){
if(!t.one)throw Error(".one callback required");
if(!t.all)throw Error(".all callback required");
return n=t.one,e.all=t.all,e}
}
),e.register("component-matches-selector/index.js",function(e,t,s){
function n(e,t){
if(r)return r.call(e,t);
for(var s=i.all(t,e.parentNode),n=0;
s.length>n;
++n)if(s[n]==e)return!0;
return!1}
var i=t("query"),o=Element.prototype,r=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.msMatchesSelector||o.oMatchesSelector;
s.exports=n}
),e.register("discore-closest/index.js",function(e,t,s){
var n=t("matches-selector");
s.exports=function(e,t,s,i){
for(e=s?{
parentNode:e}
:e,i=i||document;
(e=e.parentNode)&&e!==document;
){
if(n(e,t))return e;
if(e===i)return}
}
}
),e.register("component-delegate/index.js",function(e,t){
var s=t("closest"),n=t("event");
e.bind=function(e,t,i,o,r){
return n.bind(e,i,function(n){
var i=n.target||n.srcElement;
n.delegateTarget=s(i,t,!0,e),n.delegateTarget&&o.call(e,n)}
,r)}
,e.unbind=function(e,t,s,i){
n.unbind(e,t,s,i)}
}
),e.register("component-events/index.js",function(e,t,s){
function n(e,t){
if(!(this instanceof n))return new n(e,t);
if(!e)throw Error("element required");
if(!t)throw Error("object required");
this.el=e,this.obj=t,this._events={
}
}
function i(e){
var t=e.split(/ +/);
return{
name:t.shift(),selector:t.join(" ")}
}
var o=t("event"),r=t("delegate");
s.exports=n,n.prototype.sub=function(e,t,s){
this._events[e]=this._events[e]||{
}
,this._events[e][t]=s}
,n.prototype.bind=function(e,t){
function s(){
var e=[].slice.call(arguments).concat(h);
l[t].apply(l,e)}
var n=i(e),a=this.el,l=this.obj,c=n.name,t=t||"on"+c,h=[].slice.call(arguments,2);
return n.selector?s=r.bind(a,n.selector,c,s):o.bind(a,c,s),this.sub(c,t,s),s}
,n.prototype.unbind=function(e,t){
if(0==arguments.length)return this.unbindAll();
if(1==arguments.length)return this.unbindAllOf(e);
var s=this._events[e];
if(s){
var n=s[t];
n&&o.unbind(this.el,e,n)}
}
,n.prototype.unbindAll=function(){
for(var e in this._events)this.unbindAllOf(e)}
,n.prototype.unbindAllOf=function(e){
var t=this._events[e];
if(t)for(var s in t)this.unbind(e,s)}
}
),e.register("component-indexof/index.js",function(e,t,s){
s.exports=function(e,t){
if(e.indexOf)return e.indexOf(t);
for(var s=0;
e.length>s;
++s)if(e[s]===t)return s;
return-1}
}
),e.register("component-classes/index.js",function(e,t,s){
function n(e){
if(!e)throw Error("A DOM element reference is required");
this.el=e,this.list=e.classList}
var i=t("indexof"),o=/\s+/,r=Object.prototype.toString;
s.exports=function(e){
return new n(e)}
,n.prototype.add=function(e){
if(this.list)return this.list.add(e),this;
var t=this.array(),s=i(t,e);
return~s||t.push(e),this.el.className=t.join(" "),this}
,n.prototype.remove=function(e){
if("[object RegExp]"==r.call(e))return this.removeMatching(e);
if(this.list)return this.list.remove(e),this;
var t=this.array(),s=i(t,e);
return~s&&t.splice(s,1),this.el.className=t.join(" "),this}
,n.prototype.removeMatching=function(e){
for(var t=this.array(),s=0;
t.length>s;
s++)e.test(t[s])&&this.remove(t[s]);
return this}
,n.prototype.toggle=function(e,t){
return this.list?(t!==void 0?t!==this.list.toggle(e,t)&&this.list.toggle(e):this.list.toggle(e),this):(t!==void 0?t?this.add(e):this.remove(e):this.has(e)?this.remove(e):this.add(e),this)}
,n.prototype.array=function(){
var e=this.el.className.replace(/^\s+|\s+$/g,""),t=e.split(o);
return""===t[0]&&t.shift(),t}
,n.prototype.has=n.prototype.contains=function(e){
return this.list?this.list.contains(e):!!~i(this.array(),e)}
}
),e.register("component-emitter/index.js",function(e,t,s){
function n(e){
return e?i(e):void 0}
function i(e){
for(var t in n.prototype)e[t]=n.prototype[t];
return e}
s.exports=n,n.prototype.on=n.prototype.addEventListener=function(e,t){
return this._callbacks=this._callbacks||{
}
,(this._callbacks[e]=this._callbacks[e]||[]).push(t),this}
,n.prototype.once=function(e,t){
function s(){
n.off(e,s),t.apply(this,arguments)}
var n=this;
return this._callbacks=this._callbacks||{
}
,s.fn=t,this.on(e,s),this}
,n.prototype.off=n.prototype.removeListener=n.prototype.removeAllListeners=n.prototype.removeEventListener=function(e,t){
if(this._callbacks=this._callbacks||{
}
,0==arguments.length)return this._callbacks={
}
,this;
var s=this._callbacks[e];
if(!s)return this;
if(1==arguments.length)return delete this._callbacks[e],this;
for(var n,i=0;
s.length>i;
i++)if(n=s[i],n===t||n.fn===t){
s.splice(i,1);
break}
return this}
,n.prototype.emit=function(e){
this._callbacks=this._callbacks||{
}
;
var t=[].slice.call(arguments,1),s=this._callbacks[e];
if(s){
s=s.slice(0);
for(var n=0,i=s.length;
i>n;
++n)s[n].apply(this,t)}
return this}
,n.prototype.listeners=function(e){
return this._callbacks=this._callbacks||{
}
,this._callbacks[e]||[]}
,n.prototype.hasListeners=function(e){
return!!this.listeners(e).length}
}
),e.register("ui-component-mouse/index.js",function(e,t,s){
function n(e,t){
this.obj=t||{
}
,this.el=e}
var i=t("emitter"),o=t("event");
s.exports=function(e,t){
return new n(e,t)}
,i(n.prototype),n.prototype.bind=function(){
function e(i){
s.onmouseup&&s.onmouseup(i),o.unbind(document,"mousemove",t),o.unbind(document,"mouseup",e),n.emit("up",i)}
function t(e){
s.onmousemove&&s.onmousemove(e),n.emit("move",e)}
var s=this.obj,n=this;
return n.down=function(i){
s.onmousedown&&s.onmousedown(i),o.bind(document,"mouseup",e),o.bind(document,"mousemove",t),n.emit("down",i)}
,o.bind(this.el,"mousedown",n.down),this}
,n.prototype.unbind=function(){
o.unbind(this.el,"mousedown",this.down),this.down=null}
}
),e.register("abpetkov-percentage-calc/percentage-calc.js",function(e){
e.isNumber=function(e){
return"number"==typeof e?!0:!1}
,e.of=function(t,s){
return e.isNumber(t)&&e.isNumber(s)?t/100*s:void 0}
,e.from=function(t,s){
return e.isNumber(t)&&e.isNumber(s)?100*(t/s):void 0}
}
),e.register("abpetkov-closest-num/closest-num.js",function(e){
e.find=function(e,t){
var s=null,n=null,o=t[0];
for(i=0;
t.length>i;
i++)s=Math.abs(e-o),n=Math.abs(e-t[i]),s>n&&(o=t[i]);
return o}
}
),e.register("vesln-super/lib/super.js",function(e,t,s){
function n(){
var t=i.call(arguments);
if(t.length)return"function"!=typeof t[0]?e.merge(t):(e.inherits.apply(null,t),void 0)}
var i=Array.prototype.slice,e=s.exports=n;
e.extend=function(t,s){
var n=this,i=function(){
return n.apply(this,arguments)}
;
return e.merge([i,this]),e.inherits(i,this),t&&e.merge([i.prototype,t]),s&&e.merge([i,s]),i.extend=this.extend,i}
,e.inherits=function(e,t){
e.super_=t,Object.create?e.prototype=Object.create(t.prototype,{
constructor:{
value:e,enumerable:!1,writable:!0,configurable:!0}
}
):(e.prototype=new t,e.prototype.constructor=e)}
,e.merge=function(e){
for(var t=2===e.length?e.shift():{
}
,s=null,n=0,i=e.length;
i>n;
n++){
s=e[n];
for(var o in s)s.hasOwnProperty(o)&&(t[o]=s[o])}
return t}
}
),e.register("powerange/lib/powerange.js",function(e,t,s){
var n=(t("./main"),t("./horizontal")),i=t("./vertical"),o={
callback:function(){
}
,decimal:!1,disable:!1,disableOpacity:.5,hideRange:!1,klass:"",min:0,max:100,start:null,step:null,vertical:!1}
;
s.exports=function(e,t){
t=t||{
}
;
for(var s in o)null==t[s]&&(t[s]=o[s]);
return t.vertical?new i(e,t):new n(e,t)}
}
),e.register("powerange/lib/main.js",function(e,t,s){
function n(e,t){
return this instanceof n?(this.element=e,this.options=t||{
}
,this.slider=this.create("span","range-bar"),null!==this.element&&"text"===this.element.type&&this.init(),void 0):new n(e,t)}
var o=t("mouse"),r=t("events"),a=t("classes"),l=t("percentage-calc");
s.exports=n,n.prototype.bindEvents=function(){
this.handle=this.slider.querySelector(".range-handle"),this.touch=r(this.handle,this),this.touch.bind("touchstart","onmousedown"),this.touch.bind("touchmove","onmousemove"),this.touch.bind("touchend","onmouseup"),this.mouse=o(this.handle,this),this.mouse.bind()}
,n.prototype.hide=function(){
this.element.style.display="none"}
,n.prototype.append=function(){
var e=this.generate();
this.insertAfter(this.element,e)}
,n.prototype.generate=function(){
var e={
handle:{
type:"span",selector:"range-handle"}
,min:{
type:"span",selector:"range-min"}
,max:{
type:"span",selector:"range-max"}
,quantity:{
type:"span",selector:"range-quantity"}
}
;
for(var t in e)if(e.hasOwnProperty(t)){
var s=this.create(e[t].type,e[t].selector);
this.slider.appendChild(s)}
return this.slider}
,n.prototype.create=function(e,t){
var s=document.createElement(e);
return s.className=t,s}
,n.prototype.insertAfter=function(e,t){
e.parentNode.insertBefore(t,e.nextSibling)}
,n.prototype.extraClass=function(e){
this.options.klass&&a(this.slider).add(e)}
,n.prototype.setRange=function(e,t){
"number"!=typeof e||"number"!=typeof t||this.options.hideRange||(this.slider.querySelector(".range-min").innerHTML=e,this.slider.querySelector(".range-max").innerHTML=t)}
,n.prototype.setValue=function(e,t){
var s=l.from(parseFloat(e),t),n=l.of(s,this.options.max-this.options.min)+this.options.min,i=!1;
n=this.options.decimal?Math.round(100*n)/100:Math.round(n),i=this.element.value!=n?!0:!1,this.element.value=n,this.options.callback(),i&&this.changeEvent()}
,n.prototype.step=function(e,t){
var s=e-t,n=l.from(this.checkStep(this.options.step),this.options.max-this.options.min),o=l.of(n,s),r=[];
for(i=0;
s>=i;
i+=o)r.push(i);
return this.steps=r,this.steps}
,n.prototype.checkValues=function(e){
this.options.min>e&&(this.options.start=this.options.min),e>this.options.max&&(this.options.start=this.options.max),this.options.min>=this.options.max&&(this.options.min=this.options.max)}
,n.prototype.checkStep=function(e){
return 0>e&&(e=Math.abs(e)),this.options.step=e,this.options.step}
,n.prototype.disable=function(){
(this.options.min==this.options.max||this.options.min>this.options.max||this.options.disable)&&(this.mouse.unbind(),this.touch.unbind(),this.slider.style.opacity=this.options.disableOpacity,a(this.handle).add("range-disabled"))}
,n.prototype.unselectable=function(e,t){
a(this.slider).has("unselectable")||t!==!0?a(this.slider).remove("unselectable"):a(this.slider).add("unselectable")}
,n.prototype.changeEvent=function(){
if("function"!=typeof Event&&document.fireEvent)this.element.fireEvent("onchange");
else{
var e=document.createEvent("HTMLEvents");
e.initEvent("change",!1,!0),this.element.dispatchEvent(e)}
}
,n.prototype.init=function(){
this.hide(),this.append(),this.bindEvents(),this.extraClass(this.options.klass),this.checkValues(this.options.start),this.setRange(this.options.min,this.options.max),this.disable()}
}
),e.register("powerange/lib/horizontal.js",function(e,t,s){
function n(){
a.apply(this,arguments),this.options.step&&this.step(this.slider.offsetWidth,this.handle.offsetWidth),this.setStart(this.options.start)}
var i=t("super"),o=t("closest-num"),r=t("percentage-calc"),a=t("./main");
s.exports=n,i(n,a),n.prototype.setStart=function(e){
var t=null===e?this.options.min:e,s=r.from(t-this.options.min,this.options.max-this.options.min)||0,n=r.of(s,this.slider.offsetWidth-this.handle.offsetWidth),i=this.options.step?o.find(n,this.steps):n;
this.setPosition(i),this.setValue(this.handle.style.left,this.slider.offsetWidth-this.handle.offsetWidth)}
,n.prototype.setPosition=function(e){
this.handle.style.left=e+"px",this.slider.querySelector(".range-quantity").style.width=e+"px"}
,n.prototype.onmousedown=function(e){
e.touches&&(e=e.touches[0]),this.startX=e.clientX,this.handleOffsetX=this.handle.offsetLeft,this.restrictHandleX=this.slider.offsetWidth-this.handle.offsetWidth,this.unselectable(this.slider,!0)}
,n.prototype.onmousemove=function(e){
e.preventDefault(),e.touches&&(e=e.touches[0]);
var t=this.handleOffsetX+e.clientX-this.startX,s=this.steps?o.find(t,this.steps):t;
0>=t?this.setPosition(0):t>=this.restrictHandleX?this.setPosition(this.restrictHandleX):this.setPosition(s),this.setValue(this.handle.style.left,this.slider.offsetWidth-this.handle.offsetWidth)}
,n.prototype.onmouseup=function(){
this.unselectable(this.slider,!1)}
}
),e.register("powerange/lib/vertical.js",function(e,t,s){
function n(){
l.apply(this,arguments),o(this.slider).add("vertical"),this.options.step&&this.step(this.slider.offsetHeight,this.handle.offsetHeight),this.setStart(this.options.start)}
var i=t("super"),o=t("classes"),r=t("closest-num"),a=t("percentage-calc"),l=t("./main");
s.exports=n,i(n,l),n.prototype.setStart=function(e){
var t=null===e?this.options.min:e,s=a.from(t-this.options.min,this.options.max-this.options.min)||0,n=a.of(s,this.slider.offsetHeight-this.handle.offsetHeight),i=this.options.step?r.find(n,this.steps):n;
this.setPosition(i),this.setValue(this.handle.style.bottom,this.slider.offsetHeight-this.handle.offsetHeight)}
,n.prototype.setPosition=function(e){
this.handle.style.bottom=e+"px",this.slider.querySelector(".range-quantity").style.height=e+"px"}
,n.prototype.onmousedown=function(e){
e.touches&&(e=e.touches[0]),this.startY=e.clientY,this.handleOffsetY=this.slider.offsetHeight-this.handle.offsetHeight-this.handle.offsetTop,this.restrictHandleY=this.slider.offsetHeight-this.handle.offsetHeight,this.unselectable(this.slider,!0)}
,n.prototype.onmousemove=function(e){
e.preventDefault(),e.touches&&(e=e.touches[0]);
var t=this.handleOffsetY+this.startY-e.clientY,s=this.steps?r.find(t,this.steps):t;
0>=t?this.setPosition(0):t>=this.restrictHandleY?this.setPosition(this.restrictHandleY):this.setPosition(s),this.setValue(this.handle.style.bottom,this.slider.offsetHeight-this.handle.offsetHeight)}
,n.prototype.onmouseup=function(){
this.unselectable(this.slider,!1)}
}
),e.alias("component-events/index.js","powerange/deps/events/index.js"),e.alias("component-events/index.js","events/index.js"),e.alias("component-event/index.js","component-events/deps/event/index.js"),e.alias("component-delegate/index.js","component-events/deps/delegate/index.js"),e.alias("discore-closest/index.js","component-delegate/deps/closest/index.js"),e.alias("discore-closest/index.js","component-delegate/deps/closest/index.js"),e.alias("component-matches-selector/index.js","discore-closest/deps/matches-selector/index.js"),e.alias("component-query/index.js","component-matches-selector/deps/query/index.js"),e.alias("discore-closest/index.js","discore-closest/index.js"),e.alias("component-event/index.js","component-delegate/deps/event/index.js"),e.alias("component-classes/index.js","powerange/deps/classes/index.js"),e.alias("component-classes/index.js","classes/index.js"),e.alias("component-indexof/index.js","component-classes/deps/indexof/index.js"),e.alias("ui-component-mouse/index.js","powerange/deps/mouse/index.js"),e.alias("ui-component-mouse/index.js","mouse/index.js"),e.alias("component-emitter/index.js","ui-component-mouse/deps/emitter/index.js"),e.alias("component-event/index.js","ui-component-mouse/deps/event/index.js"),e.alias("abpetkov-percentage-calc/percentage-calc.js","powerange/deps/percentage-calc/percentage-calc.js"),e.alias("abpetkov-percentage-calc/percentage-calc.js","powerange/deps/percentage-calc/index.js"),e.alias("abpetkov-percentage-calc/percentage-calc.js","percentage-calc/index.js"),e.alias("abpetkov-percentage-calc/percentage-calc.js","abpetkov-percentage-calc/index.js"),e.alias("abpetkov-closest-num/closest-num.js","powerange/deps/closest-num/closest-num.js"),e.alias("abpetkov-closest-num/closest-num.js","powerange/deps/closest-num/index.js"),e.alias("abpetkov-closest-num/closest-num.js","closest-num/index.js"),e.alias("abpetkov-closest-num/closest-num.js","abpetkov-closest-num/index.js"),e.alias("vesln-super/lib/super.js","powerange/deps/super/lib/super.js"),e.alias("vesln-super/lib/super.js","powerange/deps/super/index.js"),e.alias("vesln-super/lib/super.js","super/index.js"),e.alias("vesln-super/lib/super.js","vesln-super/index.js"),e.alias("powerange/lib/powerange.js","powerange/index.js"),"object"==typeof exports?module.exports=e("powerange"):"function"==typeof define&&define.amd?define([],function(){
return e("powerange")}
):this.Powerange=e("powerange")}
)();
CSS代码(demo.css):
/** * * This stylesheet serves only for the purpose of this demo. * **/
/** * * Defaults. * */
*{margin:0;padding:0;}
::selection{background:#95b7d4;color:#fff;}
::-moz-selection{background:#95b7d4;color:#fff;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
body{background:fixed url('../images/background.jpg') 0 0 no-repeat;background-color:#c4d6e7\9;color:#5c5c5c;font-family:'News Cycle',Arial,Helvetica,sans-serif;font-size:15px;line-height:19px;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;}
h1{background:url('../images/logo.png') 0 0 no-repeat;float:left;height:50px;margin:19px 0 0 20px;text-indent:-9999px;width:273px;}
h2{color:#3788ca;font-family:'Maven Pro',Arial,Helvetica,sans-serif;font-size:2em;line-height:1.2em;margin-bottom:20px;}
h3{font-family:'Maven Pro',Arial,Helvetica,sans-serif;font-size:1.4em;line-height:1.3em;margin-bottom:10px;}
a{color:#4985b9;text-decoration:none;}
a:hover{color:#58A1E0;-webkit-transition:color 0.25s ease;-moz-transition:color 0.25s ease;-o-transition:color 0.25s ease;-ms-transition:color 0.25s ease;transition:color 0.25s ease;}
.note{font-size:0.85em;font-style:italic;line-height:1em;}
/** * * General layout. * */
.box{background-color:#fff;margin-bottom:30px;min-height:75px;position:relative;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);box-shadow:0 1px 1px rgba(0,0,0,0.1);}
.container{margin:0 auto;width:960px;}
.content > .box{padding:20px;}
/** * * Header. * */
.header{margin-top:20px;height:75px;}
.slogan{color:#3788ca;float:right;font-family:'Maven Pro',Arial,Helvetica,sans-serif;font-size:1.2em;margin:28px 20px 0 0;}
/** * * Content. * */
.slider-wrapper{margin:50px 0 30px 30px;position:relative;width:250px;}
.vertical-wrapper{height:200px;width:auto;}
.content strong{color:#000;}
.content .box p{margin-bottom:10px;}
.content .box p:last-child{margin-bottom:0;}
.author{margin-bottom:30px;}
.author > span{float:left;height:28px;padding-top:7px;text-shadow:0 1px 0 #fff;width:13%;}
.author > a{color:#fff;float:left;margin:0 0 0 3%;min-height:35px;padding:7px 0 0 150px;width:26%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color 0.15s ease-in;-moz-transition:background-color 0.15s ease-in;-o-transition:background-color 0.15s ease-in;-ms-transition:background-color 0.15s ease-in;transition:background-color 0.15s ease-in;}
.author .twitter{background:#47a0e3 url('../images/icon_twitter.png') 10% 10% no-repeat;}
.author .twitter:hover{background-color:#55acee;}
.author .github{background:#333 url('../images/icon_github.png') 10% 30% no-repeat;}
.author .github:hover{background-color:#404040;}
.author .dribbble{background:#ea4c89 url('../images/icon_dribbble.png') 10% 40% no-repeat;}
.author .dribbble:hover{background-color:#f65a96;}
.section-list{margin-left:8px;}
.section-list li{list-style:none;margin-bottom:12px;}
.section-list li div{background-color:#3788ca;color:#fff;display:inline-block;font-family:'Maven Pro',Arial,Helvetica,sans-serif;margin-right:5px;padding:1px 8px 4px;-webkit-transform:skewX(-15deg);-ms-transform:skewX(-15deg);transform:skewX(-15deg);}
.section-list li p{display:inline-block;}
.section-list li span{font-style:italic;}
.section-list li:last-child{margin-bottom:0;}
.button{background-color:#3788ca;border:0;color:#fff;cursor:pointer;display:inline-block;line-height:1.75em;padding:15px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color 0.15s ease-in;-moz-transition:background-color 0.15s ease-in;-o-transition:background-color 0.15s ease-in;-ms-transition:background-color 0.15s ease-in;transition:background-color 0.15s ease-in;}
.button:hover{background-color:#4497db;color:#fff;text-decoration:none;}
.button:focus{outline:0;}
.button:active{background-color:#1e6cac;}
.small-button{height:25px;padding:0;width:90px;}
.star-button{bottom:1px;position:absolute;right:1px;}
.star-icon{background:url('../images/icon_star.png') 0 0 no-repeat;display:inline-block;height:32px;margin:-6px 10px 0 0;vertical-align:middle;width:32px;}
.example{border-bottom:1px solid #deecf5;margin-bottom:20px;padding-bottom:20px;}
.example:last-child{border:0;margin:0;padding:0;}
.example:last-child .slider-wrapper{margin-bottom:15px;}
.display-box-label{font-size:0.8em;position:absolute;right:-80px;top:-8px;}
.display-box{background-color:#f7fcff;border-radius:5px;font-size:0.8em;height:23px;right:-140px;padding-top:2px;position:absolute;text-align:center;top:-10px;width:50px;-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.15);box-shadow:inset 0 0 10px rgba(0,0,0,0.15);}
.slider-wrapper .small-button{position:absolute;right:-140px;top:-10px;}
.powerranger{background:url('../images/power_ranger_gold.png') 0 0 no-repeat;height:50px;opacity:0;position:absolute;right:-100px;top:-25px;width:41px;}
/** * * Footer. * */
.footer{height:75px;margin:0 auto 100px;}
.footer .left{float:left;padding:15px 0 0 20px;width:330px;}
.footer .left ul{color:#4985b9;font-family:'Maven Pro',Arial,Helvetica,sans-serif;list-style:none;}
.footer .left ul li{display:inline;margin:0 10px 0 10px;}
.footer .left ul li:first-child{margin-left:0;}
.footer .right{float:right;padding:15px 20px 0 0;text-align:right;width:580px;}
.footer .right a{background-image:url('../images/icons_social.png');background-repeat:no-repeat;display:inline-block;height:20px;margin-left:15px;padding-left:30px;}
.footer .twitter{background-position:0 0;}
.footer .github{background-position:0 -20px;}
.footer .dribbble{background-position:0 -40px;}
.copyright{margin-top:10px;}
/** * * Code snippets. * */
pre{background-color:#141414;font-family:'Source Code Pro',Arial,Helvetica,sans-serif;font-size:0.84em;margin:20px 0 20px 3px;overflow:auto;padding:10px;white-space:nowrap;word-wrap:break-word;}
.script{color:#fff;}
.quote,.comment{color:#5e5a60;}
.name{color:#9b6e31;}
.specials{color:#f9f094;}
.tag,.attribute,.sign{color:#e0c686;}
.value{color:#8e9e65;}
.boolean{color:#c96b4b;}
.single{color:#96849e;}
/** * * Custom slider. * */
.range-min,.range-max{padding-top:1px !important;}
.range-bar.power-ranger{background-color:#6b6b6b;}
.power-ranger .range-quantity{background-color:#e52027;}
.power-ranger .range-handle{background:url('../images/power_ranger.png') 0 0 no-repeat;border-radius:0;width:25px;-webkitbox-shadow:none;box-shadow:none;}
.power-ranger .range-min{background:url('../images/heart_broken.png') 0 0 no-repeat;}
.power-ranger .range-max{background:url('../images/heart.png') 0 0 no-repeat;}
/** * * Old IE message. * */
.ie-message{background-color:rgba(255,255,255,0.9);background-image:url('../images/overlay.png')\9;display:none;height:100%;left:0;position:fixed;top:0;width:100%;}
.ie-message-content{background:#fff url('../images/powerangers.png') 5% 50% no-repeat;box-shadow:0 0 25px rgba(0,0,0,0.1);display:table;font-size:18px;height:260px;left:50%;line-height:22px;margin:-150px 0 0 -325px;padding:20px 20px 20px 275px;position:absolute;text-align:right;top:50%;width:355px;}
.ie-message-content > p{display:table-cell;vertical-align:middle;}
/** * * Responsive styles. * */
@media (max-width:980px){.container{width:95%;}
.author > a{text-align:right;padding-left:0;padding-right:20px;}
.star-button{padding:15px 10px;}
.star-icon{margin-right:0;}
.footer{margin-bottom:30px;}
.footer .left{width:270px;}
.footer .right{width:380px;}
}
@media (max-width:767px){.author > a{padding-right:10px;}
.star-button{margin-top:10px;padding:15px 20px;position:static;}
.star-icon{margin-right:10px;}
.footer{height:auto;padding-bottom:15px;}
.footer .left{margin-bottom:25px;padding-left:0;text-align:center;width:100%;}
.footer .right{padding-right:0;text-align:center;width:100%;}
}
@media (max-width:568px){.header{height:auto;}
.header > img{display:block;float:none;margin:15px auto;}
.slogan{float:none;margin:0 0 15px;text-align:center;}
.author > span{}
}
@media (max-width:567px){.header{margin-bottom:15px;}
.author > span{display:block;float:none;padding-top:0;text-align:center;width:100%;}
.author > a{display:block;float:none;margin:0 0 15px;width:100%;}
.author > a:last-child{margin-bottom:0;}
}
@media (max-width:480px){.slider-wrapper{width:200px;}
.footer .right{padding-top:0;}
.footer .right > span{display:block;margin-bottom:10px;text-align:center;}
.footer .right a{margin-left:8px;}
}
@media (max-width:479px){.display-box,.display-box-label{float:left;margin-top:18px;position:static;right:auto;top:auto;}
.display-box-label{margin-right:10px;}
.slider-wrapper .small-button,.powerranger{margin-top:18px;position:static;right:auto;top:auto;}
.powerranger{margin:20px auto 0;}
}
@media (max-width:320px){.star-button{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;width:100%;}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3/2),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){h1{background-image:url('../images/logo@2x.png');background-size:273px 50px;}
.author .twitter{background-image:url('../images/icon_twitter@2x.png');background-size:85px 69px;}
.author .github{background-image:url('../images/icon_github@2x.png');background-size:85px 85px;}
.author .dribbble{background-image:url('../images/icon_dribbble@2x.png');background-size:85px 85px;}
.star-icon{background-image:url('../images/icon_star@2x.png');background-size:32px 32px;}
.powerranger{background-image:url('../images/power_ranger_gold@2x.png');background-size:41px 50px;}
.footer .right a{background-image:url('../images/icons_social@2x.png');background-size:24px 60px;}
.power-ranger .range-handle{background-image:url('../images/power_ranger@2x.png');background-size:25px 30px;}
.power-ranger .range-min{background-image:url('../images/heart_broken@2x.png');background-size:24px 24px;}
.power-ranger .range-max{background-image:url('../images/heart@2x.png');background-size:24px 24px;}
}
CSS代码(powerange.min.css):
.range-bar{background-color:#a9acb1;border-radius:15px;display:block;height:4px;position:relative;width:100%}
.range-quantity{background-color:#017afd;border-radius:15px;display:block;height:100%;width:0}
.range-handle{background-color:#fff;border-radius:100%;cursor:move;height:30px;left:0;top:-13px;position:absolute;width:30px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.range-min,.range-max{color:#181819;font-size:12px;height:20px;padding-top:4px;position:absolute;text-align:center;top:-9px;width:24px}
.range-min{left:-30px}
.range-max{right:-30px}
.vertical{height:100%;width:4px}
.vertical .range-quantity{bottom:0;height:0;position:absolute;width:100%}
.vertical .range-handle{bottom:0;left:-13px;top:auto}
.vertical .range-min,.vertical .range-max{left:-10px;right:auto;top:auto}
.vertical .range-min{bottom:-30px}
.vertical .range-max{top:-30px}
.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.range-disabled{cursor:default}
分享到QQ
分享到微博
微信扫一扫
