Permalink
Browse files

Add a "range" class to the wrapper when multiple values are given.

  • Loading branch information...
1 parent bc132d1 commit 87e005fdb09de6f11138655a5cad55769cb1751b @antw committed Dec 7, 2011
Showing with 48 additions and 7 deletions.
  1. +7 −0 README.md
  2. +8 −0 index.html
  3. +4 −0 jquery.quinn.js
  4. +7 −7 jquery.quinn.min.js
  5. +22 −0 quinn.css
View
@@ -130,6 +130,13 @@ selectable range supplied and might break your data validation later).
$('.slider').quinn({ selectable: [5, 80], step: 20 });
+### Ranges `values: [value, value]` {#values}
+
+Instead of a Quinn slider having a single value, it may instead be used
+to represent a range of values, with a lower and upper value.
+
+ $('.slider').quinn({ values: [25, 75] });
+
### Effects `effects: bool` `effectSpeed: number` {#effects}
Some Quinn actions make use of jQuery effects. For example, clicking on
View
@@ -152,6 +152,14 @@ <h3 id="selectable">Selectable Ranges <code>selectable: [min, max]</code></h3>
<pre><code>$('.slider').quinn({ selectable: [5, 80], step: 20 });
</code></pre>
+<h3 id="values">Ranges <code>values: [value, value]</code></h3>
+
+<p>Instead of a Quinn slider having a single value, it may instead be used
+to represent a range of values, with a lower and upper value.</p>
+
+<pre><code>$('.slider').quinn({ values: [25, 75] });
+</code></pre>
+
<h3 id="effects">Effects <code>effects: bool</code> <code>effectSpeed: number</code></h3>
<p>Some Quinn actions make use of jQuery effects. For example, clicking on
View
@@ -112,6 +112,10 @@
element.append($('<div class="right" />'));
}
+ if (this.options.values) {
+ this.wrapper.addClass('range');
+ }
+
this.bar = $('<div class="bar" />');
this.activeBar = $('<div class="active-bar" />');
this.handle = $('<span class="handle" />');
View
Oops, something went wrong.
View
@@ -145,3 +145,25 @@
.quinn .handle:focus {
background-position: 0 -60px;
}
+
+/**
+ * Range sliders
+ * -------------
+ *
+ * Styles specific to sliders which instead of having a single value,
+ * represent a range by having two values (a minimum and maximum).
+ */
+
+.quinn.range .handle {
+ background-position: -102px 0;
+ height: 25px;
+ width: 17px;
+}
+
+.quinn.range .handle:active, .quinn .handle.active {
+ background-position: -102px -30px;
+}
+
+.quinn.range .handle:focus {
+ background-position: -102px -60px;
+}

0 comments on commit 87e005f

Please sign in to comment.