From 8d7928cfd7e038213049647ad449abe0eba726ba Mon Sep 17 00:00:00 2001 From: Elgar Storm Date: Thu, 13 Jun 2013 16:33:24 +1200 Subject: [PATCH 01/61] Simplified and extended example html Split css so that styling for the slider is in a separate file Tweaked js to allow an array of options to be passed in if desired --- README.md | 10 ++- index.html | 98 +++++++++++++++---------- styles.css | 192 ++----------------------------------------------- zepto-range.js | 10 +++ 4 files changed, 81 insertions(+), 229 deletions(-) diff --git a/README.md b/README.md index 5ffc69f..195bf58 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,20 @@ http://jcemer.com/zepto-range -Input range implementation to works with touch using Zepto +Input range implementation to work with touch using Zepto + +``` html header + + + +``` ``` html ``` -``` javascript +``` javascript - called after input fields are added to html $('input[type="range"]').range(); $('input[type="range"]').range('worst', 'best'); ``` diff --git a/index.html b/index.html index b5a4987..f43e054 100644 --- a/index.html +++ b/index.html @@ -3,53 +3,73 @@ Zepto Range - - - + + + + + -
-
-

Zepto Range

-

Input range implementation to works with touch using Zepto.

-

github.com/jcemer/zepto-range

+
+

Zepto Range

+

Input range implementation to works with touch using Zepto.

+

github.com/stormtek/zepto-range

-
- - -
+ + +
+

Normal mode

+ +

Inside mode

+ +
-
- -
+

Some Labels

+
+ +
-
- -
+

First and Last Label

+
+ +
-
-

Events

- -
+
+

Events

+ +
+ + +

Free standing

+ - - - -
- Fork me on GitHub + // SAMPLE 04 + var sample04 = $('#samples-04 input[type="range"]'); + sample04.on('change init', function (event, current, range) { + var labels = range.legend.children(); + labels.removeClass('active'); + labels.eq(current).addClass('active'); + }); + sample04.range('worst', 'normal', 'best'); + + //This entry is not wrapped by a div + $('#freestanding').range(); +
+ + Fork me on GitHub + \ No newline at end of file diff --git a/styles.css b/styles.css index dafc824..d5b53c8 100644 --- a/styles.css +++ b/styles.css @@ -1,32 +1,10 @@ html, body { - height: 100%; margin: 0; padding: 0; -} - -#main { - position: relative; - background-color: #141414; - background-image: -webkit-linear-gradient(top, #CCC, #EEE 100%); - background-image: -moz-linear-gradient(top, #CCC, #EEE 100%); - background-image: -ms-linear-gradient(top, #CCC, #EEE 100%); - background-image: -o-linear-gradient(top, #CCC, #EEE 100%); - background-image: linear-gradient(top, #CCC, #EEE 100%); - height: 100%; - min-height: 800px; + background-color: #ccc; color: #333; font: 300 15px/1 Verdana; } -#main:before { - background-image: -webkit-radial-gradient(center, circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 100%); - background-image: -moz-radial-gradient(center, circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 100%); - background-image: -ms-radial-gradient(center, circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 100%); - background-image: -o-radial-gradient(center, circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 100%); - background-image: radial-gradient(center, circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 100%); - position: absolute; - content: ''; - top: 0; right: 0; bottom: 0; left: 0; -} /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */ @@ -35,13 +13,8 @@ body { } .wrapper { - position: relative; - width: 500px; - height: 900px; - position: absolute; - top: 50%; left: 50%; - margin-left: -250px; - margin-top: -450px; + width: 300px; + padding-left: 20px; } h1, h2 { @@ -54,161 +27,4 @@ h2 { font-size: 30px; letter-spacing: -2px; text-shadow: 1px 2px 3px #DDD, 0 0 0 #222, 1px 2px 3px #DDD; -} - -/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */ - -input[type="range"] { - width: 100%; -} - -.range { - position: relative; -} -.range input { - position: absolute; - text-align: left; - direction: ltr; - left: -9999px; -} - -/* legend */ -.range .legend { - font-size: 16px; - position: absolute; - top: -25px; - left: 0; - right: 0; - z-index: 1; -} -.range .legend .label { - padding-top: 55px; - float: left; - text-align: center; - height: 30px; - line-height: 30px; -} -.range .legend .label:first-child { - text-align: left; -} -.range .legend .label:last-child { - text-align: right; -} - -.range .legend .label:empty { - position: relative; -} -.range .legend .label:empty:before { - content: ''; - position: absolute; - width: 1px; - top: 62px; left: 50%; bottom: 7px; - background: #CCC; - border-left: 1px solid white; -} -.range .legend .label:empty:first-child:before { - left: 20px; /* btn half size */ -} -.range .legend .label:empty:last-child:before { - left: auto; - right: 20px; /* btn half size */ -} - -.range .legend .label.active { - -webkit-transition: 0.2s all ease-out; - -moz-transition: 0.2s all ease-out; - -o-transition: 0.2s all ease-out; - transition: 0.2s all ease-out; - - color: #8D8DAC; - text-shadow: 1px 1px 1px #CCC; -} - -/* bar, fill, btn */ -.range .bar, -.range .fill { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - height: 10px; -} -.range .bar { - position: relative; - margin-top: 50px; - margin-bottom: 100px; - margin-left: 20px; /* btn half size */ - margin-right: 20px; /* btn half size */ - background: #999; - border-bottom: 1px solid rgba(255, 255, 255, .9); - -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); - -o-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); -} -.range .fill { - background: rgba(100, 100, 255, .2); - position: absolute; - top: 0; left: 0; -} -.range .btn { - margin-top: -16px; - position: absolute; - top: 0; left: -20px; /* btn half size */ - width: 38px; - height: 38px; - z-index: 2; - - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - - border: 2px solid rgba(255, 255, 255, .8); - - background-image: -webkit-radial-gradient(10px 10px, circle cover, #FFF, #DDD); - background-image: -moz-radial-gradient(10px 10px, circle cover, #FFF, #DDD); - background-image: -o-radial-gradient(10px 10px, circle cover, #FFF, #DDD); - background-image: radial-gradient(10px 10px, circle cover, #FFF, #DDD); - - -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); - -o-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); -} -.range .btn:active { - border-color: rgba(255, 255, 255, .5); - top: 1px; - -webkit-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); - -moz-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); - -o-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); -} - -/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */ - -.range.inside .bar{ - margin-left: 0; - margin-right: 0; -} -.range.inside .btn { - left: 0; -} -.range.inside .fill { - padding-right: 20px; /* btn half size */ -} - -/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */ - -.range .fill, -.range .btn { - -webkit-transition: 0.2s all ease-out; - -moz-transition: 0.2s all ease-out; - -o-transition: 0.2s all ease-out; - transition: 0.2s all ease-out; -} -.range.moving .fill, -.range.moving .btn { - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; -} +} \ No newline at end of file diff --git a/zepto-range.js b/zepto-range.js index cfaa1bb..24774e0 100644 --- a/zepto-range.js +++ b/zepto-range.js @@ -97,6 +97,11 @@ gaps = labels.length - 1, size = Math.floor(range.size / (range.amount - 1)), container, tmp, i; +console.log("gaps: " + gaps); +console.log("range size: " + range.size); +console.log("labels size: " + labels.length); +console.log("num vals: " + range.amount); +console.log("label size: " + size); // labels if (diff) { @@ -202,9 +207,14 @@ // plugin $.fn.range = function() { + console.log(this.selector); var labels; events(); labels = Array.prototype.slice.call(arguments); + //detects if the args were an array rather than a list + if(labels.length==1 && labels instanceof Array) { + labels = labels[0]; + } return this.each(function() { createRange(this, labels); }); From f6c8ced426dad9cb89a3961421483baca6fffce7 Mon Sep 17 00:00:00 2001 From: stormtek Date: Thu, 13 Jun 2013 16:43:44 +1200 Subject: [PATCH 02/61] Update README.md --- README.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 195bf58..deabe80 100644 --- a/README.md +++ b/README.md @@ -4,24 +4,32 @@ http://jcemer.com/zepto-range Input range implementation to work with touch using Zepto -``` html header +- add to header + +``` html ``` +- input fields to add into html + ``` html ``` -``` javascript - called after input fields are added to html +- called after input fields are added to html + +``` javascript $('input[type="range"]').range(); $('input[type="range"]').range('worst', 'best'); ``` ## Modes +(see the attached example to see the difference between these) + * `normal` * `inside` @@ -29,4 +37,4 @@ $('input[type="range"]').range('worst', 'best'); * `init` * `move` -* `change` \ No newline at end of file +* `change` From 564a301336f927ea6f845fe9e0d54832c8702a58 Mon Sep 17 00:00:00 2001 From: stormtek Date: Thu, 13 Jun 2013 16:49:58 +1200 Subject: [PATCH 03/61] Update README.md --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index deabe80..fabcbd6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # Zepto Range -http://jcemer.com/zepto-range - Input range implementation to work with touch using Zepto - add to header From 30e59e81806af401539cea8510a8080508ba38d6 Mon Sep 17 00:00:00 2001 From: Elgar Storm Date: Wed, 19 Jun 2013 10:51:47 +1200 Subject: [PATCH 04/61] Split css for the slider itself into a separate file Added support for a width value to be added to the input field Improved layout of options --- index.html | 56 ++++++++------- styles.css | 2 +- zepto-range.css | 185 ++++++++++++++++++++++++++++++++++++++++++++++++ zepto-range.js | 35 ++++++--- 4 files changed, 242 insertions(+), 36 deletions(-) create mode 100644 zepto-range.css diff --git a/index.html b/index.html index f43e054..4fdfeae 100644 --- a/index.html +++ b/index.html @@ -41,35 +41,41 @@

Events

Free standing

- + - - +
+

Outside Wrapper div

+
+
Fork me on GitHub + + \ No newline at end of file diff --git a/styles.css b/styles.css index d5b53c8..ec43706 100644 --- a/styles.css +++ b/styles.css @@ -13,7 +13,7 @@ body { } .wrapper { - width: 300px; + width: 500px; padding-left: 20px; } diff --git a/zepto-range.css b/zepto-range.css new file mode 100644 index 0000000..6a26edb --- /dev/null +++ b/zepto-range.css @@ -0,0 +1,185 @@ +/* makes sure width works if not specified on input */ +input[type="range"] { + width: 100%; +} + +.range { + position: relative; +} +/* hide the input value offscreen */ +.range input { + position: absolute; + text-align: left; + direction: ltr; + left: -9999px; +} + +/* legend */ +.range .legend { + font-size: 16px; + position: absolute; + top: -25px; + left: 0; + right: 0; + z-index: 1; +} + +.tablet .range .legend { + margin-top: 60px; + margin-left: 2px; +} +.phone .range .legend { + margin-top: 60px; + margin-left: 3px; +} + +.range .legend .label { + padding-top: 55px; + float: left; + text-align: center; + height: 30px; + line-height: 30px; + +} +.range .legend .label:first-child { + text-align: left; +} +.range .legend .label:last-child { + text-align: right; +} + +.range .legend .singleCharLabel:first-child { + position: relative; + left: 15px; /* 3/8 btn size */ +} +.range .legend .singleCharLabel:last-child { + position: relative; + left: -15px; /* 3/8 btn size */ +} + +.range .legend .doubleCharLabel:first-child { + position: relative; + left: 10px; /* 1/4 btn size */ +} +.range .legend .doubleCharLabel:last-child { + position: relative; + left: -10px; /* 1/4 btn size */ +} + +.range .legend .label:empty { + position: relative; +} +.range .legend .label:empty:before { + content: ''; + position: absolute; + width: 1px; + top: 62px; left: 50%; bottom: 7px; + background: #CCC; + border-left: 1px solid white; +} +.range .legend .label:empty:first-child:before { + left: 20px; /* btn half size */ +} +.range .legend .label:empty:last-child:before { + left: auto; + right: 20px; /* btn half size */ +} + +.range .legend .label.active { + -webkit-transition: 0.2s all ease-out; + -moz-transition: 0.2s all ease-out; + -o-transition: 0.2s all ease-out; + transition: 0.2s all ease-out; + + color: #8D8DAC; + text-shadow: 1px 1px 1px #CCC; +} + +/* bar, fill, btn */ +.range .bar, +.range .fill { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + height: 10px; +} +.range .bar { + position: relative; + margin-top: 50px; + margin-bottom: 100px; + margin-left: 20px; /* btn half size */ + margin-right: 20px; /* btn half size */ + background: #999; + border-bottom: 1px solid rgba(255, 255, 255, .9); + -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); + -o-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05); +} +.range .fill { + background: #60B9B4; + position: absolute; + top: 0; left: 0; +} +.range .btn { + margin-top: -16px; + position: absolute; + top: 0; left: -20px; /* btn half size */ + width: 38px; + height: 38px; + z-index: 2; + + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + + border: 2px solid rgba(255, 255, 255, .8); + + background-image: -webkit-radial-gradient(10px 10px, circle cover, #FFF, #DDD); + background-image: -moz-radial-gradient(10px 10px, circle cover, #FFF, #DDD); + background-image: -o-radial-gradient(10px 10px, circle cover, #FFF, #DDD); + background-image: radial-gradient(10px 10px, circle cover, #FFF, #DDD); + + -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); + -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); + -o-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3); +} +.range .btn:active { + border-color: rgba(255, 255, 255, .5); + top: 1px; + -webkit-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); + -moz-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); + -o-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3); +} + +/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */ + +.range.inside .bar{ + margin-left: 0; + margin-right: 0; +} +.range.inside .btn { + left: 0; +} +.range.inside .fill { + padding-right: 20px; /* btn half size */ +} + +/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */ + +.range .fill, +.range .btn { + -webkit-transition: 0.2s all ease-out; + -moz-transition: 0.2s all ease-out; + -o-transition: 0.2s all ease-out; + transition: 0.2s all ease-out; +} +.range.moving .fill, +.range.moving .btn { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} diff --git a/zepto-range.js b/zepto-range.js index 24774e0..b48770c 100644 --- a/zepto-range.js +++ b/zepto-range.js @@ -64,8 +64,6 @@ function Range(input, labels) { this.input = $(input); - this.container = this.input.wrap('
').parent(); - this.container.addClass(defaults.name + ' ' + this.input[0].className); // number this.min = parseInt(this.input.attr('min'), 10); @@ -77,10 +75,14 @@ this.btn = $('
'); this.fill = $('
'); this.bar = $('
').append(this.btn, this.fill); + this.btn.size = this.btn.width(); + + var width = parseInt(this.input.attr('width'), 10) - this.btn.size; + this.container = this.input.wrap('
').parent(); + this.container.addClass(defaults.name + ' ' + this.input[0].className); this.container.append(this.bar); - this.btn.size = this.btn.width(); - this.size = this.input.width() - this.btn.size; + this.size = width; this.gap = this.size / (this.amount - 1); // legend @@ -97,11 +99,6 @@ gaps = labels.length - 1, size = Math.floor(range.size / (range.amount - 1)), container, tmp, i; -console.log("gaps: " + gaps); -console.log("range size: " + range.size); -console.log("labels size: " + labels.length); -console.log("num vals: " + range.amount); -console.log("label size: " + size); // labels if (diff) { @@ -114,6 +111,7 @@ console.log("label size: " + size); tmp[0] = i; [].splice.apply(labels, tmp); } + } } @@ -125,6 +123,19 @@ console.log("label size: " + size); container.children().width(size); container.find(':first-child, :last-child').width(size / 2 + range.btn.size / 2); + + // adjust first label styling if necessary + var firstLabel = labels[0]; + if(firstLabel) { + if(firstLabel.length == 1) container.find(':first-child').addClass('singleCharLabel'); + else if(firstLabel.length == 2) container.find(':first-child').addClass('doubleCharLabel'); + } + // adjust last label styling if necessary + var lastLabel = labels[labels.length-1]; + if(lastLabel) { + if(lastLabel.length == 1) container.find(':last-child').addClass('singleCharLabel'); + else if(lastLabel.length == 2) container.find(':last-child').addClass('doubleCharLabel'); + } return container; } @@ -138,6 +149,11 @@ console.log("label size: " + size); }, move: function(to) { var pos = to * this.gap; + var btnWidth = this.btn.width(); + if(to > 0) { + if(to == this.amount - 1) pos -= btnWidth; + else pos -= btnWidth / 2; + } $.translateX(this.btn[0], pos); this.fill.width(pos); this.input.trigger('move', [to, this]); @@ -207,7 +223,6 @@ console.log("label size: " + size); // plugin $.fn.range = function() { - console.log(this.selector); var labels; events(); labels = Array.prototype.slice.call(arguments); From abc760cafc180f16d9aed3596db7046e46b77957 Mon Sep 17 00:00:00 2001 From: stormtek Date: Wed, 19 Jun 2013 11:25:46 +1200 Subject: [PATCH 05/61] Update README.md --- README.md | 46 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 41 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index fabcbd6..037f9f7 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ # Zepto Range -Input range implementation to work with touch using Zepto +Input range slider to work with touch using Zepto -- add to header +---------------------------------------------------------- +### File imports to add to header of html ``` html @@ -10,20 +11,55 @@ Input range implementation to work with touch using Zepto ``` -- input fields to add into html +---------------------------------------------------------- +### Input fields that the slider is built around ``` html + Date: Wed, 19 Jun 2013 17:51:56 +1200 Subject: [PATCH 06/61] Fixed bug in slider width that showed up in Chrome --- zepto-range.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/zepto-range.js b/zepto-range.js index b48770c..6fbc39a 100644 --- a/zepto-range.js +++ b/zepto-range.js @@ -77,7 +77,9 @@ this.bar = $('
').append(this.btn, this.fill); this.btn.size = this.btn.width(); - var width = parseInt(this.input.attr('width'), 10) - this.btn.size; + var setWidthValue = parseInt(this.input.attr('width'), 10); + if(setWidthValue <= 0) setWidthValue = this.input.width(); + var width = setWidthValue - this.btn.size; this.container = this.input.wrap('
').parent(); this.container.addClass(defaults.name + ' ' + this.input[0].className); this.container.append(this.bar); @@ -235,4 +237,4 @@ }); }; -})(Zepto); \ No newline at end of file +})(Zepto); From f4292acd4795c07a795abdbf61b98b77fb8b980d Mon Sep 17 00:00:00 2001 From: stormtek Date: Wed, 19 Jun 2013 21:25:27 +1200 Subject: [PATCH 07/61] Update index.html --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4fdfeae..ef0fd14 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

Free standing

Outside Wrapper div

- +
Fork me on GitHub @@ -78,4 +78,4 @@

Outside Wrapper div

$('#outside input[type="range"]').range(); - \ No newline at end of file + From 521c726491be9c336a0af9d1ddb9e3ca050e262f Mon Sep 17 00:00:00 2001 From: stormtek Date: Thu, 20 Jun 2013 17:15:34 +1200 Subject: [PATCH 08/61] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 037f9f7..74b2cc3 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Input range slider to work with touch using Zepto - type="range" - min="some_integer" -- max="some_integer_greater_than_max" +- max="some_integer_greater_than_min" - value="some_integer_between_max_and_min" The number of integers between min and max determine the number of options that the slider has. Value is the starting value that the slider has. @@ -32,9 +32,11 @@ The number of integers between min and max determine the number of options that #### Optional Parameters - width="some_integer" + - The width that you want the slider to be - class="inside" + - This determines whether the outside option lines sit inside the slider or even with the visible ends of the slider -If a width is not specified then the width of an ancestor object will be grabbed. If no ancestor has it's width specified then this will end up being the width of the page. To guarantee that width and layout work correctly it is recommended to specify a width for the input field. +If a width is not specified then the width of an ancestor object will be grabbed. If no ancestor has it's width specified then this will end up being the width of the page. To guarantee that width and layout work correctly it is recommended to specify a width for the input field. One thing to note is that if the width you specify is less than the width of a wrapping container then the slider is likely to have issues displaying correctly - the options will probably wrap funny. ---------------------------------------------------------- ### Javascript call to construct slider From 61ba550bdedbd3112894bf0ec747ac581615973e Mon Sep 17 00:00:00 2001 From: stormtek Date: Fri, 21 Jun 2013 16:49:56 +1200 Subject: [PATCH 09/61] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 74b2cc3..e9c4752 100644 --- a/README.md +++ b/README.md @@ -25,9 +25,10 @@ Input range slider to work with touch using Zepto - type="range" - min="some_integer" - max="some_integer_greater_than_min" -- value="some_integer_between_max_and_min" +- value="some_integer_between_min_and_miax" + - The initial value that is set. Note that this is not an index point but one of the values that lies between max and min. -The number of integers between min and max determine the number of options that the slider has. Value is the starting value that the slider has. +The number of integers between min and max determine the number of options that the slider has. #### Optional Parameters From fac7db9df1d468f04b6f03012ac774310f4cfef7 Mon Sep 17 00:00:00 2001 From: stormtek Date: Fri, 21 Jun 2013 17:02:45 +1200 Subject: [PATCH 10/61] Now displays min and max values if no options are passed to range() --- zepto-range.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/zepto-range.js b/zepto-range.js index 6fbc39a..45c3136 100644 --- a/zepto-range.js +++ b/zepto-range.js @@ -88,6 +88,11 @@ this.gap = this.size / (this.amount - 1); // legend + if(!labels.length) { + labels = new Array(2); + labels[0] = this.min; + labels[1] = this.max; + } this.legend = legend(labels, this); this.container.append(this.legend); From 7b8a93e62689cff54d3e868de7efb2983d53765b Mon Sep 17 00:00:00 2001 From: stormtek Date: Fri, 21 Jun 2013 17:12:24 +1200 Subject: [PATCH 11/61] Update README.md --- README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e9c4752..5756b3e 100644 --- a/README.md +++ b/README.md @@ -53,13 +53,17 @@ $('input[type="range"]').range(['1', '2', '3']); - The parameter to $() is a DOM selector for the input field The function call range() can take 3 types of parameter, as shown above -- No parameter will show simply lines for each option available -- Parameters can be passed as a list of strings or an array of strings -- If there is less than a one-to-one mapping of parameters to options then gaps will be added intelligently - - 2 parameters will map to the first and last option - - 3 parameters will map to the first, middle, and last option - - If equal sized gaps cannot be made then it will default back to simply showing lines - - Things work best for gaps if there are an odd number of options +- No parameters + - The min and max values set on the input field will be shown +- A list of strings to be shown as options +- An array of strings to be shown as options + +If there is less than a one-to-one mapping of parameters to options then gaps will be added intelligently +- 1 parameter will cause things to break +- 2 parameters will map to the first and last option +- 3 parameters will map to the first, middle, and last option +- If equal sized gaps cannot be made then it will default back to simply showing lines +- Things work best for gaps if there are an odd number of options ---------------------------------------------------------- From 9de3bf12f4c1865be517b0b29ab983d0f0d5c8dd Mon Sep 17 00:00:00 2001 From: stormtek Date: Fri, 21 Jun 2013 20:03:53 +1200 Subject: [PATCH 12/61] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 5756b3e..119cc89 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ Input range slider to work with touch using Zepto +http://stormtek.github.io/zepto-range/ + ---------------------------------------------------------- ### File imports to add to header of html From b8a30f765eb68006a427819ecda5f6fc26d3fba2 Mon Sep 17 00:00:00 2001 From: Elgar Storm Date: Mon, 24 Jun 2013 15:42:59 +1200 Subject: [PATCH 13/61] Updated to allow parameter to be passed to input to allow hiding of lines for empty values, updated demo to show this on a slider --- index.html | 2 +- zepto-range.css | 8 ++++---- zepto-range.js | 12 +++++++++++- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index ef0fd14..3b43812 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

Zepto Range

Normal mode

- +

Inside mode

diff --git a/zepto-range.css b/zepto-range.css index 6a26edb..9d4ba50 100644 --- a/zepto-range.css +++ b/zepto-range.css @@ -66,10 +66,10 @@ input[type="range"] { left: -10px; /* 1/4 btn size */ } -.range .legend .label:empty { +.range .legend .label-empty { position: relative; } -.range .legend .label:empty:before { +.range .legend .label-empty:before { content: ''; position: absolute; width: 1px; @@ -77,10 +77,10 @@ input[type="range"] { background: #CCC; border-left: 1px solid white; } -.range .legend .label:empty:first-child:before { +.range .legend .label-empty:first-child:before { left: 20px; /* btn half size */ } -.range .legend .label:empty:last-child:before { +.range .legend .label-empty:last-child:before { left: auto; right: 20px; /* btn half size */ } diff --git a/zepto-range.js b/zepto-range.js index 45c3136..5873256 100644 --- a/zepto-range.js +++ b/zepto-range.js @@ -70,6 +70,11 @@ this.max = parseInt(this.input.attr('max'), 10); this.amount = (this.max - this.min) + 1; this.current = parseInt(this.input.val(), 10) - this.min; + + //default behaviour is to show lines for empty labels + var showEmptyLabels = this.input.attr('showEmptyLabels'); + if(showEmptyLabels == 'false') this.showEmptyLabels = false; + else this.showEmptyLabels = true; // html this.btn = $('
'); @@ -125,7 +130,12 @@ // html container = $('