(function($){
function slider(options){
if(typeof options === 'number'){
options = $.extend(
{
origVal:options
},
defaults,
{
val:(( options < 0 ) ? 0 : ( (options > 100 ) ? 100 : options))
}
);
}
else if (options === "get"){
var vals = [];
$(this).each(function() {
vals.push($(this).data("sliderValue"));
});
return vals;
}
else if(typeof options === 'object'){
options = $.extend({origVal:options.val,origBarColor:options.barColor},defaults,options);
}
return $(this).each (function() {
var self=$(this);
if(self.hasClass("slider-wrapper-jq")){
if(self.data("dragSlider") === "true")
return;
if(typeof options.origVal !== "undefined")
self.slider._setValue.call(self,options.val,null,true);
if(typeof options.origBarColor !== "undefined")
self.find('.progress-bar').css("background-color",options.barColor);
return;
}
self.addClass("slider-wrapper-jq")
.append($("
")
.append("")
.append(""));
self.find('.progress').on('mousedown', function(evt){
self.data("dragSlider","true")
.data("startPoint",evt.pageX)
.data("endPoint",evt.pageX);
if(!$(evt.target).hasClass("btn")){
self.slider._setWidthFromEvent.call(self,evt.pageX,null,true);
}
else{
self.data("btnTarget","true");
}
evt.preventDefault();
evt.stopPropagation();
});
$(window).on('mouseup', function(evt){
if(self.data("dragSlider")==="true"){
if(!(self.data("btnTarget") === "true" && self.data("startPoint") === self.data("endPoint") )){
self.slider._setWidthFromEvent.call(self,evt.pageX);
}
self.removeData("dragSlider")
.removeData("btnTarget")
.removeData("startPoint")
.removeData("endPoint");
}
}).on('mousemove',function(evt){
if(self.data("dragSlider")==="true"){
self.slider._setWidthFromEvent.call(self,evt.pageX,null,true);
self.data("endPoint",evt.pageX);
evt.preventDefault();
}
});
self.slider._setValue.call(self,options.val);
});
}
var defaults={
val:50,
barColor:"#428bca"
},
_setWidthFromEvent = function(pageX,reqVals,supress) {
if(!reqVals){
reqVals = this.slider._getRequiredValues.call(this);
}
else{
reqVals = null;
}
var width = pageX - reqVals.pbar.offset().left,
perc = ((100.0*width) / (reqVals.progw));
return this.slider._setValue.call(this,perc,reqVals,supress);
},
_setValue = function (val,reqVals,supress) {
if(!reqVals){
reqVals = this.slider._getRequiredValues.call(this);
}
val = ((val<0)?0:((val>100)?100:val));
var adjVal= ((val*(100-reqVals.pbutp)/100) + (reqVals.pbutp/2));
this.data("sliderValue",val);
reqVals.pbar.css({width:adjVal+"%"});
this.find('div.btn').css('left',adjVal+"%");
if(supress !== true){
this.trigger("slider.newValue",{val:Math.round(val)});
}
return val;
},
_getRequiredValues = function(){
var pbar=this.find('.progress-bar'),
progw=this.children('.progress').get(0).clientWidth,
pbutp=((this.find('div.btn').get(0).clientWidth*100.0)/progw);
return {
pbar:pbar,
progw:progw,
pbutp:pbutp
};
};
$.fn.slider = slider;
$.fn.slider.defaults = defaults;
$.fn.slider._getRequiredValues = _getRequiredValues ;
$.fn.slider._setWidthFromEvent = _setWidthFromEvent;
$.fn.slider._setValue = _setValue;
})(jQuery);