feat(module:slider-select): add range

close #83
NG-NEST · Oct 25, 2023 · 81991ff · 81991ff
1 parent 33ebeb9
commit 81991ff
Show file tree

Hide file tree

Showing 11 changed files with 296 additions and 67 deletions.
diff --git a/lib/ng-nest/ui/slider-select/slider-select.component.html b/lib/ng-nest/ui/slider-select/slider-select.component.html
@@ -8,7 +8,7 @@
   [class.x-slider-select-reverse]="reverse"
 >
   <label *ngIf="label" [class.x-slider-select-label-required]="required" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
-  <div class="x-slider-select-inner" #innerRef (click)="onInnerClick($event)">
+  <div class="x-slider-select-inner" #innerRef>
     <div class="x-slider-select-rail" #railRef>
       <div></div>
     </div>
@@ -17,25 +17,52 @@
     </div>
     <div class="x-slider-select-drags">
       <div
-        #dragRef
+        #dragStartRef
         class="x-slider-select-drag"
         cdkDrag
         [cdkDragLockAxis]="vertical ? 'y' : 'x'"
         [cdkDragDisabled]="disabled"
         [cdkDragBoundary]="innerRef"
-        (cdkDragStarted)="started($event)"
-        (cdkDragEnded)="ended($event)"
-        (cdkDragMoved)="moved($event)"
+        (cdkDragStarted)="started($event, 'start')"
+        (cdkDragEnded)="ended($event, 'start')"
+        (cdkDragMoved)="moved($event, 'start')"
       >
         <div
-          #tooltip
+          #tooltipStart
           x-tooltip
+          tabindex="0"
           class="x-slider-select-button"
+          [class.x-slider-select-button-actived]="startVisible"
           placement="top"
-          [disabled]="!showTooltip"
-          [content]="displayValue"
-          [visible]="visible"
-          [manual]="manual"
+          [disabled]="!showTooltip && !showStartTooltip"
+          [content]="startDisplayValue"
+          [visible]="startVisible"
+          [manual]="startManual"
+        ></div>
+      </div>
+      <div
+        [hidden]="!range"
+        #dragEndRef
+        class="x-slider-select-drag"
+        cdkDrag
+        [cdkDragLockAxis]="vertical ? 'y' : 'x'"
+        [cdkDragDisabled]="disabled"
+        [cdkDragBoundary]="innerRef"
+        (cdkDragStarted)="started($event, 'end')"
+        (cdkDragEnded)="ended($event, 'end')"
+        (cdkDragMoved)="moved($event, 'end')"
+      >
+        <div
+          #tooltipEnd
+          x-tooltip
+          tabindex="0"
+          class="x-slider-select-button"
+          [class.x-slider-select-button-actived]="endVisible"
+          placement="top"
+          [disabled]="!showTooltip && !showEndTooltip"
+          [content]="endDisplayValue"
+          [visible]="endVisible"
+          [manual]="endManual"
         ></div>
       </div>
     </div>