Commits

Anonymous committed f51d64f

fixing up sliders

Comments (0)

Files changed (1)

ThreeWireMatrix/matrix_solver.html

 			min-height: 400px;
 			padding: 0.5em;
 		}
+		.slider-set div.ui-slider-horizontal {
+		  width: 200px;
+		  display:inline-block
+		}
+		.slider-set input {
+		  width: 25px;
+		  display:inline-block;
+		  border:0;
+		  color:#f6931f;
+		  font-weight:bold;
+		  background-color: #fff;
+		}
+		.slider-set label {
+		  display: inline-block;
+		  width: 50px;
+		  text-align: right;
+		}
+		.var-field {
+		  border:0;
+		  color:#f6931f;
+		  font-weight:bold;
+      background-color: #fff;
+    }
 
 		</style>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 	    $(document).ready(
 				function(){
 					/* select number of keys on the keypad */
-					$( "#slider_key_count" ).slider({
-						value:12,
-						min: 3,
-						max: 60,
-						step: 1,
-						slide: function( event, ui ) {
-							$( "#var_key_count" ).val( ui.value );
-							
-						}
+					$( "#slider_row_count" ).slider({
+						value:4,
+						min: 1,
+						max: 12,
+						slide: sliderSlide,
+						change: keySettingsChanged
 					});
-					$( "#var_key_count" ).val( $( "#slider_key_count" ).slider( "value" ) );
+					$( "#slider_col_count" ).slider({
+						value:3,
+						min: 1,
+						max: 12,
+						slide: sliderSlide,
+						change: keySettingsChanged
+					});
+					keySettingsChanged();
 				});
+				function sliderSlide(event,ui) {
+				  if(this.id && ~this.id.indexOf("slider_")) {
+  					$( "#" + this.id.replace("slider_","var_") ).val( ui.value );
+				  }
+				}
+				function keySettingsChanged() {
+ 					$( "#var_row_count" ).val( $( "#slider_row_count" ).slider( "value" ) );
+					$( "#var_col_count" ).val( $( "#slider_col_count" ).slider( "value" ) );
+          $( "#var_key_count" ).val( $( "#slider_row_count" ).slider( "value" ) * $( "#slider_col_count" ).slider( "value" ) );
+				}
 		</script>
 	</head>
 	<body>
 					<div class="ui-widget-header">Pin Inputs</div>
 					<div class="ui-widget-content">
 						<div id="content_holder_key_count_select">
-								<label for="var_key_count">Total Number of keys:</label>
-								<input type="text" id="var_key_count" style="border:0; color:#f6931f; font-weight:bold;" />
-							<div id="slider_key_count"></div>
+              <div class="slider-set">
+  							<label for="var_row_count">Rows:</label>
+	  						<input type="text" id="var_row_count" disabled />
+		  					<div id="slider_row_count"></div>
+              </div>
+              <div class="slider-set">
+				  			<label for="var_col_count">Columns:</label>
+			  				<input type="text" id="var_col_count" disabled />
+	    					<div id="slider_col_count"></div>
+              </div>
+              <div>
+							  <label for="var_key_count">Total Number of keys:</label>
+							  <input type="text" id="var_key_count" class="var-field" />
+							</div>
 						</div>
+						<hr/>
 						<div id="content_holder_pin_forms">
 							
 						</div>
-						<ul>
-							<li>PinOne,PinTwo,Key</li>
-						</ul>
 	  		  </div>
 				</div>
 			</div>