Skip to content
Browse files

fixed highlighting issue and how input object is handled

  • Loading branch information...
1 parent 48804c1 commit 0eb0094bf5291568f578092d19bcf194c21dad37 @nikorablin committed Oct 6, 2012
Showing with 33 additions and 29 deletions.
  1. BIN .DS_Store
  2. +11 −4 README.md
  3. BIN extra/.DS_Store
  4. +1 −1 extra/style.css
  5. +4 −4 index.html
  6. +16 −8 jquery.slideControl.js
  7. +1 −3 jquery.slideControl.min.js
  8. +0 −9 slideControl.css
View
BIN .DS_Store
Binary file not shown.
View
15 README.md
@@ -1,6 +1,13 @@
-slideControl jQuery Plugin
+slideControl
+================
-This plugin allows you to create nifty slider controls for text inputs.
+jQuery plugin that allows you to easily make sliders for range inputs
-Usage instructions can be found at
-http://nikorablin.com/slideControl/
+Read more here:
+http://nikorablin.com/slideControl
+
+Update 1.1
+================
+
++ Preserve original input object
++ Fixed highlighting issue
View
BIN extra/.DS_Store
Binary file not shown.
View
2 extra/style.css
@@ -54,7 +54,7 @@ ul.options {margin-left:20px; margin-bottom:20px; list-style-type:disc;}
ul.options li {margin:5px 0; font-size:0.85em;}
-input.slideControl {width:35px; font-size:1.5em; padding:3px 5px; border:1px solid #ccc; border-radius:5px; text-align:center; color:#333; font-weight:bold;}
+input.slideControl {width:40px; font-size:1.5em; padding:3px 5px; border:1px solid #ccc; border-radius:5px; text-align:center; color:#333; font-weight:bold;}
label {font-size:1em; font-weight:bold; float:left; width:145px; margin-top:10px;}
View
8 index.html
@@ -4,7 +4,7 @@
<title>slideControl.js jQuery Plugin</title>
<link rel="stylesheet" type="text/css" href="slideControl.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
-<script type="text/javascript" src="jquery.slideControl.min.js"></script>
+<script type="text/javascript" src="jquery.slideControl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
@@ -25,9 +25,9 @@
</div>
<div class="content">
<ul class="clearfix">
- <li><label>Responsiveness: </label><input type="text" value="6.0" class="slideControl" maxlength="3" /></li>
- <li><label>Safety: </label><input type="text" value="4.0" class="slideControl" maxlength="3" /></li>
- <li><label>Information: </label><input type="text" value="9.0" class="slideControl" maxlength="3" /></li>
+ <li><label>Foo: </label><input type="text" value="6.0" class="slideControl" maxlength="3" /></li>
+ <li><label>Bar: </label><input type="text" value="4.0" class="slideControl" maxlength="3" /></li>
+ <li><label>FooBar: </label><input type="text" value="9.0" class="slideControl" maxlength="3" /></li>
</ul>
</div>
View
24 jquery.slideControl.js
@@ -1,10 +1,13 @@
/*
- --------------------
- slideControl Plugin
- Nik Korablin
- 1.0 - 09/26/2012
- --------------------
-*/
+ * slideControl - jQuery Plugin
+ * version: 1.1 October 2012
+ * @requires jQuery v1.6 or later
+ *
+ * Examples at http://nikorablin.com/slideControl
+ * Free to use and abuse under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ */
(function($){
$.fn.slideControl = function(options) {
@@ -24,9 +27,10 @@
var controller = false;
var position = 0;
var obj = this;
+ $(this).addClass('slideControlInput');
var parent = $(this).parent();
var label = $(parent).find('label');
- parent.html("<label>" + $(label).html() + "</label><span class=\"slideControlContainer\"><span class=\"slideControlFill\" style=\"width:" + $(obj).val()*10 + "%\"><span class=\"slideControlHandle\"></span></span></span><input type=\"text\" class=\"slideControlInput\" value=\"" + $(obj).val() + "\" />");
+ parent.html("<label>" + $(label).html() + "</label><span class=\"slideControlContainer\"><span class=\"slideControlFill\" style=\"width:" + $(obj).val()*10 + "%\"><span class=\"slideControlHandle\"></span></span></span>" + $(obj).wrap("<span></span>").parent().html());
var container = parent.find('.slideControlContainer');
var fill = container.find('.slideControlFill');
var handle = fill.find('.slideControlHandle');
@@ -42,6 +46,7 @@
// when user clicks anywhere on the slider
$(container).click(function(e) {
+ e.preventDefault();
position = checkBoundaries(Math.round(((e.pageX - offset.left + handleWidth/2)/containerWidth)*100));
$(fill).animate({
@@ -52,15 +57,18 @@
// when user clicks handle
$(handle).mousedown(function(e) {
+ e.preventDefault();
controller = true;
$(document).mousemove(function(e) {
+ e.preventDefault();
position = checkBoundaries(Math.round(((e.pageX - offset.left + handleWidth/2)/containerWidth)*100));
if (controller) {
$(fill).width(position + "%");
$(input).val(position/10);
}
});
$(document).mouseup(function() {
+ e.preventDefault();
controller = false;
});
});
@@ -98,6 +106,6 @@
}
return rv;
}
-
+ return this;
}
})(jQuery);
View
4 jquery.slideControl.min.js
@@ -1,3 +1 @@
-(function(a){a.fn.slideControl=function(b){function i(a){return a<10*b.lowerBound?10*b.lowerBound:a>10*b.upperBound?10*b.upperBound:a}function l(){var a=-1;"Microsoft Internet Explorer"==navigator.appName&&null!=/MSIE ([0-9]{1,}[.0-9]{0,})/.exec(navigator.userAgent)&&(a=parseFloat(RegExp.$1));return a}b=a.extend({speed:400,lowerBound:1,upperBound:10},b);return this.each(function(){var e=b,j=!1,c=0,g=a(this).parent(),d=a(g).find("label");g.html("<label>"+a(d).html()+'</label><span class="slideControlContainer"><span class="slideControlFill" style="width:'+
-10*a(this).val()+'%"><span class="slideControlHandle"></span></span></span><input type="text" class="slideControlInput" value="'+a(this).val()+'" />');var d=g.find(".slideControlContainer"),h=d.find(".slideControlFill"),k=h.find(".slideControlHandle"),f=g.find("input"),m=d.outerWidth()+1,n=a(k).outerWidth(),p=a(d).offset();9>l()&&-1<l()&&k.addClass("ieShadow");a(d).click(function(b){c=i(Math.round(100*((b.pageX-p.left+n/2)/m)));a(h).animate({width:c+"%"},e.speed);a(f).val(c/10)});a(k).mousedown(function(){j=
-!0;a(document).mousemove(function(b){c=i(Math.round(100*((b.pageX-p.left+n/2)/m)));j&&(a(h).width(c+"%"),a(f).val(c/10))});a(document).mouseup(function(){j=!1})});a(f).change(function(){var b=i(10*a(this).val());a(this).val()>e.upperBound?a(f).val(e.upperBound):a(this).val()<e.lowerBound&&a(f).val(e.lowerBound);a(h).width(b+"%")})})}})(jQuery);
+(function(a){a.fn.slideControl=function(b){function d(a){if(a<b.lowerBound*10)return b.lowerBound*10;else if(a>b.upperBound*10)return b.upperBound*10;else return a}function e(){var a=-1;if(navigator.appName=="Microsoft Internet Explorer"){var b=navigator.userAgent;var c=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");if(c.exec(b)!=null)a=parseFloat(RegExp.$1)}return a}var c={speed:400,lowerBound:1,upperBound:10};var b=a.extend(c,b);return this.each(function(){var c=b;var f=false;var g=0;var h=this;var i=a(this).parent();var j=a(i).find("label");i.html("<label>"+a(j).html()+'</label><span class="slideControlContainer"><span class="slideControlFill" style="width:'+a(h).val()*10+'%"><span class="slideControlHandle"></span></span></span><input type="text" class="slideControlInput" value="'+a(h).val()+'" />');var k=i.find(".slideControlContainer");var l=k.find(".slideControlFill");var m=l.find(".slideControlHandle");var n=i.find("input");var o=k.outerWidth()+1;var p=a(m).outerWidth();var q=a(k).offset();if(e()<9&&e()>-1){m.addClass("ieShadow")}a(k).click(function(b){b.preventDefault();g=d(Math.round((b.pageX-q.left+p/2)/o*100));a(l).animate({width:g+"%"},c.speed);a(n).val(g/10)});a(m).mousedown(function(b){b.preventDefault();f=true;a(document).mousemove(function(b){b.preventDefault();g=d(Math.round((b.pageX-q.left+p/2)/o*100));if(f){a(l).width(g+"%");a(n).val(g/10)}});a(document).mouseup(function(){b.preventDefault();f=false})});a(n).change(function(){var b=d(a(this).val()*10);if(a(this).val()>c.upperBound)a(n).val(c.upperBound);else if(a(this).val()<c.lowerBound)a(n).val(c.lowerBound);a(l).width(b+"%")})});return this}})(jQuery)
View
9 slideControl.css
@@ -1,12 +1,3 @@
-html{
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
.slideControlContainer {
height:10px;
background: #efefef; /* Old browsers */

0 comments on commit 0eb0094

Please sign in to comment.
Something went wrong with that request. Please try again.