From a1c71308ff2b4c21f246cb1cc8e49cc982781582 Mon Sep 17 00:00:00 2001 From: Erik Nedwidek Date: Sat, 2 Nov 2013 14:59:09 -0400 Subject: [PATCH] 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