fix: wrap slider thumb in a container with correct styling applied (#2806)

Author: Geoffrey0

src/slider/slider.component.spec.ts

@@ -137,4 +137,21 @@ describe("Slider", () => {
 		fixture.detectChanges();
 		expect(element.nativeElement.querySelector(".cds--slider--disabled")).toBeTruthy();
 	});
+
+	it("should set the value of the right thumb if it's closer on click of the slider", () => {
+		element.componentInstance.value = [0, 90];
+		const slider = element.nativeElement.querySelector(".cds--slider");
+		const track = element.nativeElement.querySelector(".cds--slider__track");
+		const event = new MouseEvent("click", {clientX: track.getBoundingClientRect().right});
+		slider.dispatchEvent(event);
+		expect(element.componentInstance.value).toEqual([0, 100]);
+	});
+
+	it("should set the value of the left thumb if it's closer on click of the slider", () => {
+		element.componentInstance.value = [10, 100];
+		const slider = element.nativeElement.querySelector(".cds--slider");
+		const event = new MouseEvent("click", {clientX: 0});
+		slider.dispatchEvent(event);
+		expect(element.componentInstance.value).toEqual([0, 100]);
+	});
 });

src/slider/slider.component.ts

@@ -78,38 +78,42 @@ import { EventService } from "carbon-components-angular/utils";
 				</label>
 				<div
 					class="cds--slider"
+					(click)="onClick($event)"
 					[ngClass]="{'cds--slider--disabled': disabled}">
 					<ng-container *ngIf="!isRange()">
-						<div
-							#thumbs
-							role="slider"
-							[id]="id"
-							[attr.aria-labelledby]="labelId"
-							class="cds--slider__thumb"
-							[ngStyle]="{left: getFractionComplete(value) * 100 + '%'}"
-							tabindex="0"
-							(mousedown)="onMouseDown($event)"
-							(keydown)="onKeyDown($event)">
+						<div class="cds--slider__thumb-wrapper"
+							[ngStyle]="{insetInlineStart: getFractionComplete(value) * 100 + '%'}">
+							<div
+								#thumbs
+								role="slider"
+								[id]="id"
+								[attr.aria-labelledby]="labelId"
+								class="cds--slider__thumb"
+								tabindex="0"
+								(mousedown)="onMouseDown($event)"
+								(keydown)="onKeyDown($event)">
+							</div>
 						</div>
 					</ng-container>
 					<ng-container *ngIf="isRange()">
-						<div
-							#thumbs
-							*ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy"
-							role="slider"
-							[id]="id + (i > 0 ? '-' + i : '')"
-							[attr.aria-labelledby]="labelId"
-							class="cds--slider__thumb"
-							[ngStyle]="{left: getFractionComplete(thumb) * 100 + '%'}"
-							tabindex="0"
-							(mousedown)="onMouseDown($event, i)"
-							(keydown)="onKeyDown($event, i)">
+						<div class="cds--slider__thumb-wrapper"
+						 [ngStyle]="{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}"
+						 *ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy">
+							<div
+								#thumbs
+								role="slider"
+								[id]="id + (i > 0 ? '-' + i : '')"
+								[attr.aria-labelledby]="labelId"
+								class="cds--slider__thumb"
+								tabindex="0"
+								(mousedown)="onMouseDown($event, i)"
+								(keydown)="onKeyDown($event, i)">
+							</div>
 						</div>
 					</ng-container>
 					<div
 						#track
-						class="cds--slider__track"
-						(click)="onClick($event)">
+						class="cds--slider__track">
 					</div>
 					<div
 						#filledTrack
@@ -446,11 +450,24 @@ export class Slider implements AfterViewInit, ControlValueAccessor {
 		this.value = this.value;
 	}
 
-	/** Handles clicks on the range track, and setting the value to it's "real" equivalent */
+	/**
+	 * Handles clicks on the slider, and setting the value to it's "real" equivalent.
+	 * Will assign the value to the closest thumb if in range mode.
+	 * */
 	onClick(event) {
 		if (this.disabled) { return; }
 		const trackLeft = this.track.nativeElement.getBoundingClientRect().left;
-		this._value[0] = this.convertToValue(event.clientX - trackLeft);
+		const trackValue = this.convertToValue(event.clientX - trackLeft);
+		if (this.isRange()) {
+			if (Math.abs(this._value[0] - trackValue) < Math.abs(this._value[1] - trackValue)) {
+				this._value[0] = trackValue;
+			} else {
+				this._value[1] = trackValue;
+			}
+		} else {
+			this._value[0] = trackValue;
+		}
+
 		this.value = this.value;
 	}