From a1c71308ff2b4c21f246cb1cc8e49cc982781582 Mon Sep 17 00:00:00 2001 From: Erik Nedwidek Date: Sat, 2 Nov 2013 14:59:09 -0400 Subject: [PATCH 1/5] Adding option showScale (or data-slider-showscale) to show min and max slider values under the slider. Added demos. Themed with classes: scale, min-scale, and max-scale. --- css/simple-slider-volume.css | 18 ++++++++++++++++++ css/simple-slider.css | 13 +++++++++++++ css/simple-slider.min.css | 1 + demo.html | 9 +++++++++ js/simple-slider.js | 27 ++++++++++++++++++++++++++- js/simple-slider.min.js | 12 +----------- 6 files changed, 68 insertions(+), 12 deletions(-) create mode 100644 css/simple-slider.min.css diff --git a/css/simple-slider-volume.css b/css/simple-slider-volume.css index d8a876b..5c350cb 100644 --- a/css/simple-slider-volume.css +++ b/css/simple-slider-volume.css @@ -46,3 +46,21 @@ background: -webkit-linear-gradient(top, #c5c5c5, #a2a2a2); background: linear-gradient(top, #c5c5c5, #a2a2a2); } + +.slider-volume > .scale { + width: 100%; + color: #888; + font-size: small; +} + +.slider-volume > .scale > .min-scale { + float: left; + font-weight: bold; + color: #622; +} + +.slider-volume > .scale > .max-scale { + float: right; + font-weight: bold; + color: #262; +} diff --git a/css/simple-slider.css b/css/simple-slider.css index ca9bf6b..8fee4ce 100644 --- a/css/simple-slider.css +++ b/css/simple-slider.css @@ -53,3 +53,16 @@ border-color: #496805; } +.slider > .scale { + width: 100%; + color: #888; + font-size: small; +} + +.slider > .scale > .min-scale { + float: left; +} + +.slider > .scale > .max-scale { + float: right; +} diff --git a/css/simple-slider.min.css b/css/simple-slider.min.css new file mode 100644 index 0000000..8d815c1 --- /dev/null +++ b/css/simple-slider.min.css @@ -0,0 +1 @@ +.slider{width:300px}.slider>.dragger{background:#8dca09;background:-webkit-linear-gradient(top,#8dca09,#72a307);background:-moz-linear-gradient(top,#8dca09,#72a307);background:linear-gradient(top,#8dca09,#72a307);-webkit-box-shadow:inset 0 2px 2px rgba(255,255,255,0.5),0 2px 8px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 2px 2px rgba(255,255,255,0.5),0 2px 8px rgba(0,0,0,0.2);box-shadow:inset 0 2px 2px rgba(255,255,255,0.5),0 2px 8px rgba(0,0,0,0.2);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #496805;width:16px;height:16px}.slider>.dragger:hover{background:-webkit-linear-gradient(top,#8dca09,#8dca09)}.slider>.track,.slider>.highlight-track{background:#ccc;background:-webkit-linear-gradient(top,#bbb,#ddd);background:-moz-linear-gradient(top,#bbb,#ddd);background:linear-gradient(top,#bbb,#ddd);-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;border:1px solid #aaa;height:4px}.slider>.highlight-track{background-color:#8dca09;background:-webkit-linear-gradient(top,#8dca09,#72a307);background:-moz-linear-gradient(top,#8dca09,#72a307);background:linear-gradient(top,#8dca09,#72a307);border-color:#496805}.slider>.scale{width:100%;color:#888;font-size:small}.slider>.scale>.min-scale{float:left}.slider>.scale>.max-scale{float:right} \ No newline at end of file diff --git a/demo.html b/demo.html index ad3b4b0..000c8c5 100644 --- a/demo.html +++ b/demo.html @@ -29,9 +29,15 @@

jQuery Simple Slider Examples

Basic Example

+

Basic Example (with Scale)

+ +

Basic Example (Themed)

+

Basic Example (Themed with Scale)

+ +

Predefined Value

@@ -41,6 +47,9 @@

Steps

Range

+

Range (with Scale)

+ +

Range & Steps

diff --git a/js/simple-slider.js b/js/simple-slider.js index 1b917f6..0e018e9 100644 --- a/js/simple-slider.js +++ b/js/simple-slider.js @@ -2,6 +2,7 @@ jQuery Simple Slider Copyright (c) 2012 James Smith (http://loopj.com) + Copyright (c) 2013 Erik J. Nedwidek (http://github.com/nedwidek) Licensed under the MIT license (http://mit-license.org/) */ @@ -23,7 +24,8 @@ var __slice = [].slice, classPrefix: null, classSuffix: null, theme: null, - highlight: false + highlight: false, + showScale: false }; this.settings = $.extend({}, this.defaultOptions, options); if (this.settings.theme) { @@ -106,6 +108,20 @@ var __slice = [].slice, } this.setSliderPositionFromValue(this.value); ratio = this.valueToRatio(this.value); + if (this.settings.showScale) { + this.scale = this.createDivElement("scale"); + this.minScale = this.createSpanElement("min-scale", this.scale); + this.maxScale = this.createSpanElement("max-scale", this.scale); + + range = this.getRange(); + + this.minScale.html(range.min); + this.maxScale.html(range.max); + + this.scale.css('marginTop', function(index, currentValue) { + return (parseInt(currentValue, 10) + this.previousSibling.offsetHeight / 2) + 'px'; + }); + } this.input.trigger("slider:ready", { value: this.value, ratio: ratio, @@ -125,6 +141,12 @@ var __slice = [].slice, return item; }; + SimpleSlider.prototype.createSpanElement = function(classname, parent) { + var item; + item = $("").addClass(classname).appendTo(parent); + return item; + }; + SimpleSlider.prototype.setRatio = function(ratio) { var value; ratio = Math.min(1, ratio); @@ -357,6 +379,9 @@ var __slice = [].slice, if ($el.data("slider-animate") != null) { settings.animate = $el.data("slider-animate"); } + if ($el.data("slider-showscale") != null) { + settings.showScale = $el.data("slider-showscale"); + } return $el.simpleSlider(settings); }); }); diff --git a/js/simple-slider.min.js b/js/simple-slider.min.js index b6a7341..e573845 100644 --- a/js/simple-slider.min.js +++ b/js/simple-slider.min.js @@ -1,11 +1 @@ -/* - * jQuery Simple Slider: Unobtrusive Numerical Slider - * Version 1.0.0 - * - * Copyright (c) 2013 James Smith (http://loopj.com) - * - * Licensed under the MIT license (http://mit-license.org/) - * - */ - -var __slice=[].slice,__indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input),this.input.attr("id")&&this.slider.attr("id",this.input.attr("id")+"-slider"),this.track=this.createDivElement("track").css({width:"100%"}),this.settings.highlight&&(this.highlightTrack=this.createDivElement("highlight-track").css({width:"0"})),this.dragger=this.createDivElement("dragger"),this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2}),this.track.css({marginTop:this.track.outerHeight()/-2}),this.settings.highlight&&this.highlightTrack.css({marginTop:this.track.outerHeight()/-2}),this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2}),this.track.mousedown(function(e){return i.trackEvent(e)}),this.settings.highlight&&this.highlightTrack.mousedown(function(e){return i.trackEvent(e)}),this.dragger.mousedown(function(e){if(e.which!==1)return;return i.dragging=!0,i.dragger.addClass("dragging"),i.domDrag(e.pageX,e.pageY),!1}),e("body").mousemove(function(t){if(i.dragging)return i.domDrag(t.pageX,t.pageY),e("body").css({cursor:"pointer"})}).mouseup(function(t){if(i.dragging)return i.dragging=!1,i.dragger.removeClass("dragging"),e("body").css({cursor:"auto"})}),this.pagePos=0,this.input.val()===""?(this.value=this.getRange().min,this.input.val(this.value)):this.value=this.nearestValidValue(this.input.val()),this.setSliderPositionFromValue(this.value),r=this.valueToRatio(this.value),this.input.trigger("slider:ready",{value:this.value,ratio:r,position:r*this.slider.outerWidth(),el:this.slider})}return t.prototype.createDivElement=function(t){var n;return n=e("
").addClass(t).css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider),n},t.prototype.setRatio=function(e){var t;return e=Math.min(1,e),e=Math.max(0,e),t=this.ratioToValue(e),this.setSliderPositionFromValue(t),this.valueChanged(t,e,"setRatio")},t.prototype.setValue=function(e){var t;return e=this.nearestValidValue(e),t=this.valueToRatio(e),this.setSliderPositionFromValue(e),this.valueChanged(e,t,"setValue")},t.prototype.trackEvent=function(e){if(e.which!==1)return;return this.domDrag(e.pageX,e.pageY,!0),this.dragging=!0,!1},t.prototype.domDrag=function(e,t,n){var r,i,s;n==null&&(n=!1),r=e-this.slider.offset().left,r=Math.min(this.slider.outerWidth(),r),r=Math.max(0,r);if(this.pagePos!==r)return this.pagePos=r,i=r/this.slider.outerWidth(),s=this.ratioToValue(i),this.valueChanged(s,i,"domDrag"),this.settings.snap?this.setSliderPositionFromValue(s,n):this.setSliderPosition(r,n)},t.prototype.setSliderPosition=function(e,t){t==null&&(t=!1);if(t&&this.settings.animate){this.dragger.animate({left:e},200);if(this.settings.highlight)return this.highlightTrack.animate({width:e},200)}else{this.dragger.css({left:e});if(this.settings.highlight)return this.highlightTrack.css({width:e})}},t.prototype.setSliderPositionFromValue=function(e,t){var n;return t==null&&(t=!1),n=this.valueToRatio(e),this.setSliderPosition(n*this.slider.outerWidth(),t)},t.prototype.getRange=function(){return this.settings.allowedValues?{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}:this.settings.range?{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}:{min:0,max:1}},t.prototype.nearestValidValue=function(t){var n,r,i,s;return i=this.getRange(),t=Math.min(i.max,t),t=Math.max(i.min,t),this.settings.allowedValues?(n=null,e.each(this.settings.allowedValues,function(){if(n===null||Math.abs(this-t)this.settings.step/2&&s=0?(s=e(this).data("slider-object"),s[i].apply(s,t)):(o=i,e(this).data("slider-object",new n(e(this),o)))})}}),e(function(){return e("[data-slider]").each(function(){var t,n,r,i;return t=e(this),r={},n=t.data("slider-values"),n&&(r.allowedValues=function(){var e,t,r,s;r=n.split(","),s=[];for(e=0,t=r.length;e").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input);if(this.input.attr("id")){this.slider.attr("id",this.input.attr("id")+"-slider")}this.track=this.createDivElement("track").css({width:"100%"});if(this.settings.highlight){this.highlightTrack=this.createDivElement("highlight-track").css({width:"0"})}this.dragger=this.createDivElement("dragger");this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2});this.track.css({marginTop:this.track.outerHeight()/-2});if(this.settings.highlight){this.highlightTrack.css({marginTop:this.track.outerHeight()/-2})}this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2});this.track.mousedown(function(i){return h.trackEvent(i)});if(this.settings.highlight){this.highlightTrack.mousedown(function(i){return h.trackEvent(i)})}this.dragger.mousedown(function(i){if(i.which!==1){return}h.dragging=true;h.dragger.addClass("dragging");h.domDrag(i.pageX,i.pageY);return false});c("body").mousemove(function(i){if(h.dragging){h.domDrag(i.pageX,i.pageY);return c("body").css({cursor:"pointer"})}}).mouseup(function(i){if(h.dragging){h.dragging=false;h.dragger.removeClass("dragging");return c("body").css({cursor:"auto"})}});this.pagePos=0;if(this.input.val()===""){this.value=this.getRange().min;this.input.val(this.value)}else{this.value=this.nearestValidValue(this.input.val())}this.setSliderPositionFromValue(this.value);g=this.valueToRatio(this.value);if(this.settings.showScale){this.scale=this.createDivElement("scale");this.minScale=this.createSpanElement("min-scale",this.scale);this.maxScale=this.createSpanElement("max-scale",this.scale);range=this.getRange();this.minScale.html(range.min);this.maxScale.html(range.max);this.scale.css("marginTop",function(i,j){return(parseInt(j,10)+this.previousSibling.offsetHeight/2)+"px"})}this.input.trigger("slider:ready",{value:this.value,ratio:g,position:g*this.slider.outerWidth(),el:this.slider})}d.prototype.createDivElement=function(f){var e;e=c("
").addClass(f).css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider);return e};d.prototype.createSpanElement=function(g,e){var f;f=c("").addClass(g).appendTo(e);return f};d.prototype.setRatio=function(e){var f;e=Math.min(1,e);e=Math.max(0,e);f=this.ratioToValue(e);this.setSliderPositionFromValue(f);return this.valueChanged(f,e,"setRatio")};d.prototype.setValue=function(f){var e;f=this.nearestValidValue(f);e=this.valueToRatio(f);this.setSliderPositionFromValue(f);return this.valueChanged(f,e,"setValue")};d.prototype.trackEvent=function(f){if(f.which!==1){return}this.domDrag(f.pageX,f.pageY,true);this.dragging=true;return false};d.prototype.domDrag=function(i,g,e){var f,h,j;if(e==null){e=false}f=i-this.slider.offset().left;f=Math.min(this.slider.outerWidth(),f);f=Math.max(0,f);if(this.pagePos!==f){this.pagePos=f;h=f/this.slider.outerWidth();j=this.ratioToValue(h);this.valueChanged(j,h,"domDrag");if(this.settings.snap){return this.setSliderPositionFromValue(j,e)}else{return this.setSliderPosition(f,e)}}};d.prototype.setSliderPosition=function(e,f){if(f==null){f=false}if(f&&this.settings.animate){this.dragger.animate({left:e},200);if(this.settings.highlight){return this.highlightTrack.animate({width:e},200)}}else{this.dragger.css({left:e});if(this.settings.highlight){return this.highlightTrack.css({width:e})}}};d.prototype.setSliderPositionFromValue=function(g,e){var f;if(e==null){e=false}f=this.valueToRatio(g);return this.setSliderPosition(f*this.slider.outerWidth(),e)};d.prototype.getRange=function(){if(this.settings.allowedValues){return{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}}else{if(this.settings.range){return{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}}else{return{min:0,max:1}}}};d.prototype.nearestValidValue=function(i){var h,g,f,e;f=this.getRange();i=Math.min(f.max,i);i=Math.max(f.min,i);if(this.settings.allowedValues){h=null;c.each(this.settings.allowedValues,function(){if(h===null||Math.abs(this-i)this.settings.step/2&&e=0){h=c(this).data("slider-object");return h[f].apply(h,e)}else{g=f;return c(this).data("slider-object",new b(c(this),g))}})}});return c(function(){return c("[data-slider]").each(function(){var e,g,f,d;e=c(this);f={};g=e.data("slider-values");if(g){f.allowedValues=(function(){var k,i,j,h;j=g.split(",");h=[];for(k=0,i=j.length;k Date: Sat, 2 Nov 2013 18:39:24 -0400 Subject: [PATCH 2/5] Issue: #43 Link: https://github.com/loopj/jquery-simple-slider/issues/43 Users were confused by documentation showing data-slider-* attributes as being the way to configure the slider. data-slider-* options were being processed by a visitor function that for each input created a settings object and invoked SimpleSlider with those settings. Moved the logic that created a settings object to SimpleSlider.loadDataSettings(). If SimpleSlider() is called this method will be invoked to create the settings from the data-slider-* attributes. If SimpleSlider(settings) is called it will not (settings will come from the object being passed). --- js/simple-slider.js | 77 ++++++++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 35 deletions(-) diff --git a/js/simple-slider.js b/js/simple-slider.js index 0e018e9..6dd6a61 100644 --- a/js/simple-slider.js +++ b/js/simple-slider.js @@ -27,6 +27,9 @@ var __slice = [].slice, highlight: false, showScale: false }; + if(typeof options == 'undefined') { + options = this.loadDataOptions(); + } this.settings = $.extend({}, this.defaultOptions, options); if (this.settings.theme) { this.settings.classSuffix = "-" + this.settings.theme; @@ -130,6 +133,44 @@ var __slice = [].slice, }); } + SimpleSlider.prototype.loadDataOptions = function() { + var options = {}; + allowedValues = this.input.data("slider-values"); + if (allowedValues) { + options.allowedValues = (function() { + var _i, _len, _ref, _results; + _ref = allowedValues.split(","); + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + x = _ref[_i]; + _results.push(parseFloat(x)); + } + return _results; + })(); + } + if (this.input.data("slider-range")) { + options.range = this.input.data("slider-range").split(","); + } + if (this.input.data("slider-step")) { + options.step = this.input.data("slider-step"); + } + options.snap = this.input.data("slider-snap"); + options.equalSteps = this.input.data("slider-equal-steps"); + if (this.input.data("slider-theme")) { + options.theme = this.input.data("slider-theme"); + } + if (this.input.attr("data-slider-highlight")) { + options.highlight = this.input.data("slider-highlight"); + } + if (this.input.data("slider-animate") != null) { + options.animate = this.input.data("slider-animate"); + } + if (this.input.data("slider-showscale") != null) { + options.showScale = this.input.data("slider-showscale"); + } + return options; + } + SimpleSlider.prototype.createDivElement = function(classname) { var item; item = $("
").addClass(classname).css({ @@ -348,41 +389,7 @@ var __slice = [].slice, return $("[data-slider]").each(function() { var $el, allowedValues, settings, x; $el = $(this); - settings = {}; - allowedValues = $el.data("slider-values"); - if (allowedValues) { - settings.allowedValues = (function() { - var _i, _len, _ref, _results; - _ref = allowedValues.split(","); - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - x = _ref[_i]; - _results.push(parseFloat(x)); - } - return _results; - })(); - } - if ($el.data("slider-range")) { - settings.range = $el.data("slider-range").split(","); - } - if ($el.data("slider-step")) { - settings.step = $el.data("slider-step"); - } - settings.snap = $el.data("slider-snap"); - settings.equalSteps = $el.data("slider-equal-steps"); - if ($el.data("slider-theme")) { - settings.theme = $el.data("slider-theme"); - } - if ($el.attr("data-slider-highlight")) { - settings.highlight = $el.data("slider-highlight"); - } - if ($el.data("slider-animate") != null) { - settings.animate = $el.data("slider-animate"); - } - if ($el.data("slider-showscale") != null) { - settings.showScale = $el.data("slider-showscale"); - } - return $el.simpleSlider(settings); + return $el.simpleSlider(); }); }); })(this.jQuery || this.Zepto, this); From e36d74e9655346dffbde2d57a7f1586f89ec8aba Mon Sep 17 00:00:00 2001 From: Erik Nedwidek Date: Sat, 2 Nov 2013 22:15:43 -0400 Subject: [PATCH 3/5] Minified changes for issue 43 against upstream (loopj/jquery-simple-slider) --- js/simple-slider.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/simple-slider.min.js b/js/simple-slider.min.js index e573845..bd26c06 100644 --- a/js/simple-slider.min.js +++ b/js/simple-slider.min.js @@ -1 +1 @@ -var __slice=[].slice,__indexOf=[].indexOf||function(c){for(var b=0,a=this.length;b").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input);if(this.input.attr("id")){this.slider.attr("id",this.input.attr("id")+"-slider")}this.track=this.createDivElement("track").css({width:"100%"});if(this.settings.highlight){this.highlightTrack=this.createDivElement("highlight-track").css({width:"0"})}this.dragger=this.createDivElement("dragger");this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2});this.track.css({marginTop:this.track.outerHeight()/-2});if(this.settings.highlight){this.highlightTrack.css({marginTop:this.track.outerHeight()/-2})}this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2});this.track.mousedown(function(i){return h.trackEvent(i)});if(this.settings.highlight){this.highlightTrack.mousedown(function(i){return h.trackEvent(i)})}this.dragger.mousedown(function(i){if(i.which!==1){return}h.dragging=true;h.dragger.addClass("dragging");h.domDrag(i.pageX,i.pageY);return false});c("body").mousemove(function(i){if(h.dragging){h.domDrag(i.pageX,i.pageY);return c("body").css({cursor:"pointer"})}}).mouseup(function(i){if(h.dragging){h.dragging=false;h.dragger.removeClass("dragging");return c("body").css({cursor:"auto"})}});this.pagePos=0;if(this.input.val()===""){this.value=this.getRange().min;this.input.val(this.value)}else{this.value=this.nearestValidValue(this.input.val())}this.setSliderPositionFromValue(this.value);g=this.valueToRatio(this.value);if(this.settings.showScale){this.scale=this.createDivElement("scale");this.minScale=this.createSpanElement("min-scale",this.scale);this.maxScale=this.createSpanElement("max-scale",this.scale);range=this.getRange();this.minScale.html(range.min);this.maxScale.html(range.max);this.scale.css("marginTop",function(i,j){return(parseInt(j,10)+this.previousSibling.offsetHeight/2)+"px"})}this.input.trigger("slider:ready",{value:this.value,ratio:g,position:g*this.slider.outerWidth(),el:this.slider})}d.prototype.createDivElement=function(f){var e;e=c("
").addClass(f).css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider);return e};d.prototype.createSpanElement=function(g,e){var f;f=c("").addClass(g).appendTo(e);return f};d.prototype.setRatio=function(e){var f;e=Math.min(1,e);e=Math.max(0,e);f=this.ratioToValue(e);this.setSliderPositionFromValue(f);return this.valueChanged(f,e,"setRatio")};d.prototype.setValue=function(f){var e;f=this.nearestValidValue(f);e=this.valueToRatio(f);this.setSliderPositionFromValue(f);return this.valueChanged(f,e,"setValue")};d.prototype.trackEvent=function(f){if(f.which!==1){return}this.domDrag(f.pageX,f.pageY,true);this.dragging=true;return false};d.prototype.domDrag=function(i,g,e){var f,h,j;if(e==null){e=false}f=i-this.slider.offset().left;f=Math.min(this.slider.outerWidth(),f);f=Math.max(0,f);if(this.pagePos!==f){this.pagePos=f;h=f/this.slider.outerWidth();j=this.ratioToValue(h);this.valueChanged(j,h,"domDrag");if(this.settings.snap){return this.setSliderPositionFromValue(j,e)}else{return this.setSliderPosition(f,e)}}};d.prototype.setSliderPosition=function(e,f){if(f==null){f=false}if(f&&this.settings.animate){this.dragger.animate({left:e},200);if(this.settings.highlight){return this.highlightTrack.animate({width:e},200)}}else{this.dragger.css({left:e});if(this.settings.highlight){return this.highlightTrack.css({width:e})}}};d.prototype.setSliderPositionFromValue=function(g,e){var f;if(e==null){e=false}f=this.valueToRatio(g);return this.setSliderPosition(f*this.slider.outerWidth(),e)};d.prototype.getRange=function(){if(this.settings.allowedValues){return{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}}else{if(this.settings.range){return{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}}else{return{min:0,max:1}}}};d.prototype.nearestValidValue=function(i){var h,g,f,e;f=this.getRange();i=Math.min(f.max,i);i=Math.max(f.min,i);if(this.settings.allowedValues){h=null;c.each(this.settings.allowedValues,function(){if(h===null||Math.abs(this-i)this.settings.step/2&&e=0){h=c(this).data("slider-object");return h[f].apply(h,e)}else{g=f;return c(this).data("slider-object",new b(c(this),g))}})}});return c(function(){return c("[data-slider]").each(function(){var e,g,f,d;e=c(this);f={};g=e.data("slider-values");if(g){f.allowedValues=(function(){var k,i,j,h;j=g.split(",");h=[];for(k=0,i=j.length;k").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input);if(this.input.attr("id")){this.slider.attr("id",this.input.attr("id")+"-slider")}this.track=this.createDivElement("track").css({width:"100%"});if(this.settings.highlight){this.highlightTrack=this.createDivElement("highlight-track").css({width:"0"})}this.dragger=this.createDivElement("dragger");this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2});this.track.css({marginTop:this.track.outerHeight()/-2});if(this.settings.highlight){this.highlightTrack.css({marginTop:this.track.outerHeight()/-2})}this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2});this.track.mousedown(function(i){return h.trackEvent(i)});if(this.settings.highlight){this.highlightTrack.mousedown(function(i){return h.trackEvent(i)})}this.dragger.mousedown(function(i){if(i.which!==1){return}h.dragging=true;h.dragger.addClass("dragging");h.domDrag(i.pageX,i.pageY);return false});c("body").mousemove(function(i){if(h.dragging){h.domDrag(i.pageX,i.pageY);return c("body").css({cursor:"pointer"})}}).mouseup(function(i){if(h.dragging){h.dragging=false;h.dragger.removeClass("dragging");return c("body").css({cursor:"auto"})}});this.pagePos=0;if(this.input.val()===""){this.value=this.getRange().min;this.input.val(this.value)}else{this.value=this.nearestValidValue(this.input.val())}this.setSliderPositionFromValue(this.value);g=this.valueToRatio(this.value);if(this.settings.showScale){this.scale=this.createDivElement("scale");this.minScale=this.createSpanElement("min-scale",this.scale);this.maxScale=this.createSpanElement("max-scale",this.scale);range=this.getRange();this.minScale.html(range.min);this.maxScale.html(range.max);this.scale.css("marginTop",function(i,j){return(parseInt(j,10)+this.previousSibling.offsetHeight/2)+"px"})}this.input.trigger("slider:ready",{value:this.value,ratio:g,position:g*this.slider.outerWidth(),el:this.slider})}d.prototype.loadDataOptions=function(){var e={};allowedValues=this.input.data("slider-values");if(allowedValues){e.allowedValues=(function(){var i,g,h,f;h=allowedValues.split(",");f=[];for(i=0,g=h.length;i").addClass(f).css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider);return e};d.prototype.createSpanElement=function(g,e){var f;f=c("").addClass(g).appendTo(e);return f};d.prototype.setRatio=function(e){var f;e=Math.min(1,e);e=Math.max(0,e);f=this.ratioToValue(e);this.setSliderPositionFromValue(f);return this.valueChanged(f,e,"setRatio")};d.prototype.setValue=function(f){var e;f=this.nearestValidValue(f);e=this.valueToRatio(f);this.setSliderPositionFromValue(f);return this.valueChanged(f,e,"setValue")};d.prototype.trackEvent=function(f){if(f.which!==1){return}this.domDrag(f.pageX,f.pageY,true);this.dragging=true;return false};d.prototype.domDrag=function(i,g,e){var f,h,j;if(e==null){e=false}f=i-this.slider.offset().left;f=Math.min(this.slider.outerWidth(),f);f=Math.max(0,f);if(this.pagePos!==f){this.pagePos=f;h=f/this.slider.outerWidth();j=this.ratioToValue(h);this.valueChanged(j,h,"domDrag");if(this.settings.snap){return this.setSliderPositionFromValue(j,e)}else{return this.setSliderPosition(f,e)}}};d.prototype.setSliderPosition=function(e,f){if(f==null){f=false}if(f&&this.settings.animate){this.dragger.animate({left:e},200);if(this.settings.highlight){return this.highlightTrack.animate({width:e},200)}}else{this.dragger.css({left:e});if(this.settings.highlight){return this.highlightTrack.css({width:e})}}};d.prototype.setSliderPositionFromValue=function(g,e){var f;if(e==null){e=false}f=this.valueToRatio(g);return this.setSliderPosition(f*this.slider.outerWidth(),e)};d.prototype.getRange=function(){if(this.settings.allowedValues){return{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}}else{if(this.settings.range){return{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}}else{return{min:0,max:1}}}};d.prototype.nearestValidValue=function(i){var h,g,f,e;f=this.getRange();i=Math.min(f.max,i);i=Math.max(f.min,i);if(this.settings.allowedValues){h=null;c.each(this.settings.allowedValues,function(){if(h===null||Math.abs(this-i)this.settings.step/2&&e=0){h=c(this).data("slider-object");return h[f].apply(h,e)}else{g=f;return c(this).data("slider-object",new b(c(this),g))}})}});return c(function(){return c("[data-slider]").each(function(){var e,g,f,d;e=c(this);return e.simpleSlider()})})})(this.jQuery||this.Zepto,this); \ No newline at end of file From 8bf4a66d430370dda27d7d3f1d3afb7d6d813010 Mon Sep 17 00:00:00 2001 From: Erik Nedwidek Date: Sat, 2 Nov 2013 23:05:21 -0400 Subject: [PATCH 4/5] Added documentation to supplement website. --- Documentation.md | 133 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 Documentation.md diff --git a/Documentation.md b/Documentation.md new file mode 100644 index 0000000..aa58eb9 --- /dev/null +++ b/Documentation.md @@ -0,0 +1,133 @@ +jQuery Simple Slider +==================== + +Overview +-------- + +Simple Slider is a jQuery plugin which allows your users to select a value from a numerical range by simply dragging a slider. + +Features +-------- + +* Configurable without editing any JavaScript +* No external dependencies, apart from jQuery +* Compact size +* Unobtrusive JavaScript, activate using data-slider="true" on any input +* Easy to skin/style purely in css, no images required +* Slider value goes directly into your input element, for easy use in normal html forms +* Supports both pre-defined values and a continous ranges +* Supports smooth sliding and snap-to-value sliding +* Supports highlighting the slider background when dragging + +Installation +------------ + +Include jQuery and the Simple Slider JavaScript and CSS files on your page, then activate Simple Slider on your text input using the data-slider attribute: + + + + + + + + + + + +You can also manually turn any text input into a Simple Slider in JavaScript as follows (settings will be taken from data-slider-* attributes): + + $("#my-input").simpleSlider(); + +Attributes can also be specified in the javascript: + + $("#my-input").simpleSlider({ + animate: true, + theme: 'volume', + showScale: true + }); + +Configuration +------------- + +### data-slider-range +> Javascript: range +> The range representing the start and end of the slider. Eg. data-slider-range="10,1000" + +### data-slider-step +> Javascript: step +> The interval to move when dragging the slider. Eg. data-slider-step="100" + +### data-slider-snap +> Javascript: snap +> Setting this to true makes the slider snap to each step when dragging, otherwise dragging will be continuous. Eg. data-slider-snap="true" + +### data-slider-values +> Javascript: allowedValues (array) +> A pre-defined list of values to allow sliding for. Eg. data-slider-values="0,100,500,800,2000" + +### data-slider-equal-steps +> Javascript: equalSteps +> Setting this to true makes the spacing between each always value equal when used with data-slider-values. Eg. data-slider-equal-steps="true" + +### data-slider-theme +> Javascript: theme +> The CSS theme to use when rendering this slider. Setting this value adds a suffix to the CSS class of the slider. Eg. data-slider-theme="volume" + +### data-slider-highlight +> Javascript: highlight +> Boolean for if we should highlight the background of the slider as it it dragged. Eg. data-slider-highlight="true" + +### data-slider-showscale +> Javascript: showScale +> Boolean for if we should display the minimum and maximum scale below the slider. Eg. data-slider-highlight="true" + +Events +------ + +You can bind to the following jQuery events using bind, for example: $("#my-input").bind("slider:ready", function (event, data) { ... }) + +### slider:ready +> Fired when the slider is loaded and attached to your input field. + +### slider:changed +> Fired when the value of your slider changes. + +All Simple Slider events pass 2 parameters into your function, event and data. event is a regular jQuery event object. data contains the following properties: + +### value +> The current value of the slider. + +### ratio +> How far, as a percentage, the slider is from start to end (0 - 1). + +### el +> The generated outer HTML element representing the slider. + +Getting Slider Values +--------------------- + +The value the user selects with the slider is immediately available inside the value attribute of the text input you attached the slider to. This means you can include Simple Slider in your HTML forms and the the selected value will automatically be send to your server when the form is submitted. + +If you would like to get the slider’s value using javascript, you can register for the slider:changed event: + + $("#my-input").bind("slider:changed", function (event, data) { + // The currently selected value of the slider + alert(data.value); + + // The value as a ratio of the slider (between 0 and 1) + alert(data.ratio); + }); + +Methods +------- + +### selector.simpleSlider("setValue", value); +> Sets the value of the slider. + +selector.simpleSlider("setRatio", ratio); +> Sets the ratio (see above) of the slider. + +License +------- + +Simple Slider is released under the MIT license. From 892d44f93642e0abfe8557e57f84875ce3887409 Mon Sep 17 00:00:00 2001 From: Erik Nedwidek Date: Sat, 2 Nov 2013 23:08:56 -0400 Subject: [PATCH 5/5] Markdown formatting fixes --- Documentation.md | 10 +++++++++- js/simple-slider.js | 4 +++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/Documentation.md b/Documentation.md index aa58eb9..0fcf58b 100644 --- a/Documentation.md +++ b/Documentation.md @@ -51,34 +51,42 @@ Configuration ### data-slider-range > Javascript: range +> > The range representing the start and end of the slider. Eg. data-slider-range="10,1000" ### data-slider-step > Javascript: step +> > The interval to move when dragging the slider. Eg. data-slider-step="100" ### data-slider-snap > Javascript: snap +> > Setting this to true makes the slider snap to each step when dragging, otherwise dragging will be continuous. Eg. data-slider-snap="true" ### data-slider-values > Javascript: allowedValues (array) +> > A pre-defined list of values to allow sliding for. Eg. data-slider-values="0,100,500,800,2000" ### data-slider-equal-steps > Javascript: equalSteps +> > Setting this to true makes the spacing between each always value equal when used with data-slider-values. Eg. data-slider-equal-steps="true" ### data-slider-theme > Javascript: theme +> > The CSS theme to use when rendering this slider. Setting this value adds a suffix to the CSS class of the slider. Eg. data-slider-theme="volume" ### data-slider-highlight > Javascript: highlight +> > Boolean for if we should highlight the background of the slider as it it dragged. Eg. data-slider-highlight="true" ### data-slider-showscale > Javascript: showScale +> > Boolean for if we should display the minimum and maximum scale below the slider. Eg. data-slider-highlight="true" Events @@ -124,7 +132,7 @@ Methods ### selector.simpleSlider("setValue", value); > Sets the value of the slider. -selector.simpleSlider("setRatio", ratio); +### selector.simpleSlider("setRatio", ratio); > Sets the ratio (see above) of the slider. License diff --git a/js/simple-slider.js b/js/simple-slider.js index 6dd6a61..64b3bf5 100644 --- a/js/simple-slider.js +++ b/js/simple-slider.js @@ -1,7 +1,9 @@ /* jQuery Simple Slider - Copyright (c) 2012 James Smith (http://loopj.com) + Copyright (c) 2012, 2013 James Smith (http://loopj.com) + Copyright (c) 2013 Maarten van Grootel (http://maatenvangrootel.nl) + Copyright (c) 2013 Nathan Hunzaker (http://natehunzaker.com) Copyright (c) 2013 Erik J. Nedwidek (http://github.com/nedwidek) Licensed under the MIT license (http://mit-license.org/)