--prod

questionnaire/.gitignore

@@ -31,6 +31,7 @@ speed-measure-plugin.json
 !.vscode/extensions.json
 .history/*
 
+
 # misc
 /.sass-cache
 /connect.lock

questionnaire/src/app/age/age.component.css

@@ -50,10 +50,11 @@
   }
   .ageWrapper #dot{
     position: absolute;
-    height: 45px;
+    height: 35px;
     width: 1px;
     background: #5566e9;
     z-index: 1;
+    top:66%;
   }
   #dot span{
     width: 8px;
@@ -76,17 +77,18 @@
     width: 1.6666%;
     height: 8px;
     border-left: 1px #d5d5d5 solid;
-
+    position: relative;
   }
-  .age li:nth-child(5n+1){
-    height: 15px;
+  .age li:nth-child(10n+1){
+    height: 20px;
     position: relative;
     width: 1.6666%;
     border-left: 1px #d5d5d5 solid;
   }
   .age li span{
     position: absolute;
-    top: 15px;
+    top: 20px;
     left: -8px;
   }
+
   

questionnaire/src/app/age/age.component.html

@@ -20,10 +20,10 @@
     <div id="dot" [ngStyle]="{'left': (value2-20)/60*100 + '%'}">
       <span></span>
     </div>
-    <input style="position: absolute; opacity: 0.5; left: 0;width: '100%' " type="range" [(ngModel)]="value2"
-      (ngModelChange)="selectAge($event)" min="20" max="80" step="1" />
+    <input style="position: absolute; opacity: 0; left: 0;width: '100%';top: 58%;z-index: 2; " type="range"
+      [(ngModel)]="value2" (ngModelChange)="selectAge($event)" min="20" max="80" step="1" />
 
-      <h2>{{value2}}</h2>
+    <h2 style="text-align: center;">{{value2}}</h2>
     <!-- <div style="text-align: center;font-size: 36px;color:#5566e9;">{{value2}}</div>
     <nz-slider [(ngModel)]="value2" [nzDisabled]="disabled" [nzMin]='20' [nzMax]="80" [nzTipFormatter]="null"
       (ngModelChange)="selectAge($event)">