This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

fixed highlighting issue and how input object is handled

  • Loading branch information...
nikorablin committed Oct 6, 2012
1 parent 48804c1 commit 0eb0094bf5291568f578092d19bcf194c21dad37
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
@@ -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
Binary file not shown.
View
@@ -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
@@ -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 @@ <h3><a href="http://nikorablin.com">Nik Korablin</a></h3>
</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
@@ -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);

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -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.