added support for range and number inputs

w3co · Jan 21, 2015 · cf3fb49 · cf3fb49
1 parent 059cd80
commit cf3fb49
Show file tree

Hide file tree

Showing 13 changed files with 679 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -203,6 +203,72 @@ Each module has options. Some of options are common between modules and some are
 	</tbody>
 </table>
 
+### Number input
+
+<table>
+	<thead>
+		<tr>
+			<th>Option</th>
+			<th>Description</th>
+			<th>Data Type</th>
+			<th>Default</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><code>pressInterval</code></td>
+			<td>Specify the interval which will control how fast the value is changing while the buttons are pressed.</td>
+			<td>number</td>
+			<td><code>150</code></td>
+		</tr>
+		<tr>
+			<td><code>disabledClass</code></td>
+			<td>Specify class which will be added to arrow buttons when maximum or minimum number is reached</td>
+			<td>string</td>
+			<td><code>"jcf-disabled"</code></td>
+		</tr>
+	</tbody>
+</table>
+
+### Range input
+
+<table>
+	<thead>
+		<tr>
+			<th>Option</th>
+			<th>Description</th>
+			<th>Data Type</th>
+			<th>Default</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><code>orientation</code></td>
+			<td>Specify range input orientation: <code>"horizontal"</code> or <code>"vertical"</code></td>
+			<td>string</td>
+			<td><code>horizontal</code></td>
+		</tr>
+		<tr>
+			<td><code>dragHandleCenter</code></td>
+			<td>Enable this option to make the cursor stick to the center of the input handle</td>
+			<td>boolean</td>
+			<td><code>true</code></td>
+		</tr>
+		<tr>
+			<td><code>snapToMarks</code></td>
+			<td>Snap input handle to HTML5 datalist marks</td>
+			<td>boolean</td>
+			<td><code>true</code></td>
+		</tr>
+		<tr>
+			<td><code>snapRadius</code></td>
+			<td>Specify snapping radius in pixels</td>
+			<td>number</td>
+			<td><code>5</code></td>
+		</tr>
+	</tbody>
+</table>
+
 ### File
 
 <table>

diff --git a/css/theme-minimal/jcf.css b/css/theme-minimal/jcf.css
@@ -378,6 +378,143 @@ body > .jcf-select-drop.jcf-drop-flipped {
 	content: '';
 }
 
+/* number input */
+.jcf-number {
+	display: inline-block;
+	position: relative;
+	height: 32px;
+}
+.jcf-number input {-moz-appearance: textfield;}
+.jcf-number input::-webkit-inner-spin-button,
+.jcf-number input::-webkit-outer-spin-button {-webkit-appearance: none;}
+.jcf-number input {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	border: 1px solid #777;
+	padding: 3px 27px 3px 7px;
+	margin: 0;
+	height: 100%;
+}
+.jcf-number .jcf-btn-dec,
+.jcf-number .jcf-btn-inc {
+	position: absolute;
+	background: #aaa;
+	width: 20px;
+	height: 15px;
+	right: 1px;
+	top: 1px;
+}
+.jcf-number .jcf-btn-dec {
+	top: auto;
+	bottom: 1px;
+}
+.jcf-number .jcf-btn-dec:hover,
+.jcf-number .jcf-btn-inc:hover {
+	background: #e6e6e6;
+}
+.jcf-number.jcf-disabled .jcf-btn-dec:hover,
+.jcf-number.jcf-disabled .jcf-btn-inc:hover {
+	background: #aaa;
+}
+.jcf-number .jcf-btn-dec:before,
+.jcf-number .jcf-btn-inc:before {
+	position: absolute;
+	content: '';
+	width: 0;
+	height: 0;
+	top: 50%;
+	left: 50%;
+	margin: -6px 0 0 -4px;
+	border: 4px solid #aaa;
+	border-color: transparent transparent #000 transparent;
+}
+.jcf-number .jcf-btn-dec:before {
+	margin: -1px 0 0 -4px;
+	border-color: #000 transparent transparent transparent;	
+}
+.jcf-number.jcf-disabled .jcf-btn-dec:before,
+.jcf-number.jcf-disabled .jcf-btn-inc:before,
+.jcf-number .jcf-btn-dec.jcf-disabled:before,
+.jcf-number .jcf-btn-inc.jcf-disabled:before {
+	opacity: 0.3;
+}
+.jcf-number.jcf-disabled input {
+	background: #ddd;
+}
+
+/* range input */
+.jcf-range {
+	display: inline-block;
+	min-width: 200px;
+	margin: 0 10px;
+	width: 130px;
+}
+.jcf-range .jcf-range-track {
+	margin: 0 20px 0 0;
+	position: relative;
+	display: block;
+}
+.jcf-range .jcf-range-wrapper {
+	background: #e5e5e5;
+	border-radius: 5px;
+	display: block;
+	margin: 5px 0;
+	height: 10px;
+}
+.jcf-range.jcf-vertical {
+	width: auto;
+}
+.jcf-range.jcf-vertical .jcf-range-wrapper {
+	margin: 0;
+	width: 10px;
+	height: auto;
+	padding: 20px 0 0;
+}
+.jcf-range.jcf-vertical .jcf-range-track {
+	height: 180px;
+	width: 10px;
+}
+.jcf-range.jcf-vertical .jcf-range-handle {
+	left: -5px;
+	top: auto;
+}
+.jcf-range .jcf-range-handle {
+	position: absolute;
+	background: #aaa;
+	border-radius: 19px;
+	width: 19px;
+	height: 19px;
+	margin: -4px 0 0;
+	z-index: 1;
+	top: 0;
+	left: 0;
+}
+.jcf-range .jcf-range-mark {
+	position: absolute;
+	overflow: hidden;
+	background: #000;
+	width: 1px;
+	height: 3px;
+	top: -7px;
+	margin: 0 0 0 9px;
+}
+.jcf-range.jcf-vertical .jcf-range-mark {
+	margin: 0 0 9px;
+	left: 14px;
+	top: auto;
+	width: 3px;
+	height: 1px;
+}
+.jcf-range.jcf-focus .jcf-range-handle {
+	border: 1px solid #f00;
+	margin: -5px 0 0 -1px;
+}
+.jcf-range.jcf-disabled {
+	background: none !important;
+	opacity: 0.3;
+}
+
 /* common styles */
 .jcf-disabled {background: #ddd !important;}
 .jcf-focus, .jcf-focus * {border-color: #f00 !important;}
diff --git a/index.html b/index.html
@@ -11,7 +11,9 @@
 	<script src="js/jcf.js"></script>
 	<script src="js/jcf.file.js"></script>
 	<script src="js/jcf.radio.js"></script>
+	<script src="js/jcf.range.js"></script>
 	<script src="js/jcf.button.js"></script>
+	<script src="js/jcf.number.js"></script>
 	<script src="js/jcf.select.js"></script>
 	<script src="js/jcf.checkbox.js"></script>
 	<script src="js/jcf.textarea.js"></script>
@@ -33,7 +35,52 @@
 		<h1>JavaScript Custom Forms</h1>
 		<p>This library allows crossbrowser form elements customization using CSS.</p>
 		<p>Supported elements are following: <strong>select, checkbox, radio, file input, textarea and scrollbars</strong> (and more coming)</p>
-
+	</section>
+
+	<section class="demo-number">
+		<h2>Number inputs</h2>
+		<input type="number" min="-3" max="20" step="2">
+		<input type="number" value="2">
+		<input type="number" step="7" value="5" min="-20" max="45">
+		<input type="number" disabled value="7">
+	</section>
+
+	<section class="demo-range">
+		<h2>Range inputs</h2>
+		<div class="col">
+			<div class="row">
+				<label>Default range input:</label>
+				<input type="range">
+			</div>
+			<div class="row">
+				<label>Disabled range input:</label>
+				<input type="range" disabled>
+			</div>
+			<div class="row">
+				<label>With "min", "max" and "step" attributes:</label>
+				<input type="range" min="-3" max="45" step="7" onchange="console.log(this.value)">
+			</div>
+			<div class="row">
+				<label>HTML5 Datalist test:</label>
+				<input type="range" value="0" min="0" max="100" list="testdata1">
+			</div>
+		</div>
+		<div class="col">
+			<div class="row">
+				<label>Vertical slider:</label>
+				<input type="range" value="0" min="0" max="100" list="testdata1" data-jcf='{"orientation": "vertical"}'>
+			</div>
+			<datalist id="testdata1">
+				<option>0</option>
+				<option>10</option>
+				<option>11</option>
+				<option>15</option>
+				<option>30</option>
+				<option>50</option>
+				<option>90</option>
+				<option>100</option>
+			</datalist>
+		</div>
 	</section>
 
 	<section class="demo-selects">

diff --git a/js/jcf.button.js b/js/jcf.button.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.2
+ * Version: 1.0.3
  */
 ;(function($, window) {
 	'use strict';

diff --git a/js/jcf.checkbox.js b/js/jcf.checkbox.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.2
+ * Version: 1.0.3
  */
 ;(function($, window) {
 	'use strict';

diff --git a/js/jcf.file.js b/js/jcf.file.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.2
+ * Version: 1.0.3
  */
 ;(function($, window) {
 	'use strict';

diff --git a/js/jcf.js b/js/jcf.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.2
+ * Version: 1.0.3
  */
 ;(function (root, factory) {
 	if (typeof define === 'function' && define.amd) {