coveo-slider/dist/js/Coveo.Slider.min.js

Coveo's enhanced slider component using HTML5 input range

var CoveoSliderMethods={Destroy:"destroy",Disable:"disable",Enable:"enable",Update:"update"},Slider=function(){function r(e){var t=this;e.slider&&_.isUndefined(e.min)&&e.slider.attr("min")&&(e.min=parseFloat(e.slider.attr("min"))),e.slider&&_.isUndefined(e.max)&&e.slider.attr("max")&&(e.max=parseFloat(e.slider.attr("max"))),this.options=_.defaults(e,this.defaults(e.colors)),this.$el=e.slider,this._uid=++r._uid,this.$el.attr({"data-uid":this._uid,max:this.options.max,min:this.options.min,step:this.options.step}),this.$el.on("input",function(){return t.onInput()}),this.$el.on("change",function(){return t.onChange()}),this.$el.prop("disabled")&&this.disable(),this.options.onInit(this)}return r.prototype.onInput=function(){this.update(),this.options.onSlide(this)},r.prototype.onChange=function(){this.update(),this.options.onChange(this)},r.prototype.defaults=function(e){return{colors:_.defaults(e||{},{lower:r.LowerDefaultColor,upper:r.UpperDefaultColor}),min:0,max:100,step:1,labels:[],ticks:[],value:r.DefaultValue,thumbWidth:20,onInit:_.noop,onSlide:_.noop,onChange:_.noop,onDestroy:_.noop}},r.prototype.update=function(){var e=(this.value-this.min)/(this.max-this.min)*100;this.updateSliderColors(e),this.positionElements()},r.prototype.positionElements=function(){var n=this;if(this.options.labels&&this.options.labels.length){var l=this.$el.nextAll("."+r.LabelContainerClass);if(l&&l.length){var a=(this.max-this.min)/this.options.step;_.each(this.options.labels,function(e){var t=l.find("."+r.LabelClass+'[data-index="'+e.index+'"]');if(t&&t.length){var i=t.width()/l.width()*100/2,s=(e.index-n.options.min)/n.options.step/a;t.css({left:100*s-i+"%","margin-left":-1*s*n.options.thumbWidth+n.options.thumbWidth/2+"px"})}})}}if(this.options.ticks&&this.options.ticks.length){var s=this.$el.nextAll("."+r.TickContainerClass);if(s&&s.length){var o=(this.max-this.min)/this.options.step;_.each(this.options.ticks,function(e){var t=s.find("."+r.TickClass+'[data-index="'+e+'"]');if(t&&t.length){var i=(e-n.min)/n.options.step/o;t.css({left:100*i+"%","margin-left":-1*i*n.options.thumbWidth+"px",background:e<n.value?n.options.colors.lower:n.options.colors.upper})}})}}},r.prototype.updateSliderColors=function(e){var t=this.$el.prev("."+r.StyleClass),i=this.options.colors,s="background: linear-gradient(to right, "+i.lower+" "+e+"%, "+i.upper+" "+e+"%);",n="."+r.InputClass+"[data-uid='"+this._uid+"']",l=['input[type="range"]'+n+"::-webkit-slider-runnable-track {",s,"}"].join(""),a=['input[type="range"]'+n+"::-moz-range-track {",s,"}"].join(""),o=['input[type="range"]'+n+"::-ms-fill-lower {","background: ",this.options.colors.lower,"}",'input[type="range"]'+n+"::-ms-fill-upper {","background: ",this.options.colors.upper,"}"].join("");t.html([l,a,o].join(""))},Object.defineProperty(r.prototype,"value",{get:function(){return parseFloat(this.$el.val())},set:function(e){var t=Math.min(e,this.max),i=Math.max(t,this.min);this.$el.val(i)},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"min",{get:function(){return parseFloat(this.$el.attr("min"))},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"max",{get:function(){return parseFloat(this.$el.attr("max"))},enumerable:!0,configurable:!0}),r.prototype.disable=function(){this.$el.prop("disabled",!0),this.$el.css("opacity","0.8")},r.prototype.enable=function(){this.$el.prop("disabled",!1),this.$el.css("opacity","1")},r.prototype.destroy=function(e){this.$el.prev("."+r.StyleClass).remove(),this.$el.nextAll("."+r.TickContainerClass).remove(),this.$el.nextAll("."+r.LabelContainerClass).remove(),this.$el.removeData("slider"),this.$el.removeAttr("data-uid"),this.$el.off("input change"),e.removeData("slider"),this.options.onDestroy()},r.LowerDefaultColor="#f57f03",r.UpperDefaultColor="#dddddd",r.StyleClass="coveo-slider-style",r.InputClass="coveo-slider-input",r.LabelContainerClass="coveo-slider-labels",r.LabelClass="coveo-slider-label",r.TickContainerClass="coveo-slider-ticks",r.TickClass="coveo-slider-tick",r.DefaultValue=50,r._uid=0,r}();!function(r){"use strict";function d(){return r("<style />",{type:"text/css",class:Slider.StyleClass})}function p(){return r("<div />",{class:Slider.TickContainerClass})}function u(){return r("<div />",{class:Slider.LabelContainerClass})}function h(i,e){_.chain(e).sortBy(function(e){return e.index}).each(function(e){var t=r("<div />",{class:Slider.LabelClass,text:e.label||e.index,"data-index":e.index});i.append(t)})}function c(i,e){_.chain(e).sortBy(_.identity).each(function(e){var t=r("<div />",{class:Slider.TickClass,"data-index":e});i.append(t)})}function a(e,t){var i,s;if(e.is('input[type="range"]')){if((s=e).prop("disabled",!0===t.disabled),0==(i=e.prev("style."+Slider.StyleClass)).length&&(i=d(),e.before(i)),t&&t.ticks){var n=e.nextAll("."+Slider.TickContainerClass),l=_.isBoolean(t.ticks)&&t.ticks?_.range(t.min||0,(t.max||100)+(t.step||1),t.step||1):t.ticks;(t.ticks=l)&&l.length&&(0==n.length&&(n=p()),c(n,l),e.after(n))}if(t&&t.labels){var a=e.nextAll("."+Slider.LabelContainerClass);(o=_.isBoolean(t.labels)&&t.labels?_.range(t.min||0,(t.max||100)+(t.step||1),t.step||1):t.labels)&&o.length&&(o=_.map(o,function(e){return _.isNumber(e)?{index:e}:e}),0==a.length&&(a=u()),h(a,o),e.after(a)),t.labels=o}}else{if(0==(i=e.children("style."+Slider.StyleClass)).length&&(i=d(),e.prepend(i)),0==(s=e.children('input[type="range"].'+Slider.InputClass)).length?(s=function(e,t){return r("<input />",{type:"range",class:Slider.InputClass,value:e}).prop("disabled",t)}(_.isUndefined(t.value)?Slider.DefaultValue:t.value,t&&!0===t.disabled),e.append(s)):_.isNumber(t.value)&&s.val(t.value),t&&t.ticks){n=e.children("."+Slider.TickContainerClass),l=_.isBoolean(t.ticks)&&t.ticks?_.range(t.min||0,(t.max||100)+(t.step||1),t.step||1):t.ticks;(t.ticks=l)&&l.length&&(0==n.length&&(n=p()),c(n,l),e.append(n))}if(t&&t.labels){var o;a=e.children("."+Slider.LabelContainerClass);(o=_.isBoolean(t.labels)&&t.labels?_.range(t.min||0,(t.max||100)+(t.step||1),t.step||1):t.labels)&&o.length&&(o=_.map(o,function(e){return _.isNumber(e)?{index:e}:e}),0==a.length&&(a=u()),h(a,o),e.append(a)),t.labels=o}}return{input:s,style:i}}r.fn.slider=function(e){var t=r(this);e=e||{slider:t};var i=t.data("slider");if(_.isNumber(e)&&(e={value:e}),i&&i instanceof Slider){var s=t.data("slider");if(e&&!_.isUndefined(e.value))s.value=e.value,a(t,{value:s.value}),s.update();else if(_.isString(e))switch(a(t,{}),e){case CoveoSliderMethods.Destroy:s.destroy(t);break;case CoveoSliderMethods.Disable:s.disable();break;case CoveoSliderMethods.Enable:s.enable();break;case CoveoSliderMethods.Update:s.update()}else a(t,{value:s.value}),s.update()}else if(!_.isString(e)&&!_.isNumber(e)){var n=e,l=a(t,n);n.slider=l.input,i=new Slider(n),t.data("slider",i)}return i&&i instanceof Slider&&i.update(),t}}(jQuery);