diff --git a/components/slider/marks.component.ts b/components/slider/marks.component.ts
index 32ee13c1ab..f2021cd7e6 100644
--- a/components/slider/marks.component.ts
+++ b/components/slider/marks.component.ts
@@ -18,18 +18,19 @@ import { NzDisplayedMark, NzExtendedMark, NzMark, NzMarkObj } from './typings';
selector: 'nz-slider-marks',
exportAs: 'nzSliderMarks',
template: `
-
-
-
+
`,
imports: [NgStyle, NgForOf],
- standalone: true
+ standalone: true,
+ host: {
+ class: 'ant-slider-mark'
+ }
})
export class NzSliderMarksComponent implements OnChanges {
static ngAcceptInputType_vertical: BooleanInput;
diff --git a/components/slider/slider.component.ts b/components/slider/slider.component.ts
index 479bc43423..7b85992d1a 100644
--- a/components/slider/slider.component.ts
+++ b/components/slider/slider.component.ts
@@ -13,7 +13,6 @@ import {
Component,
ElementRef,
EventEmitter,
- forwardRef,
Input,
OnChanges,
OnDestroy,
@@ -23,25 +22,25 @@ import {
QueryList,
SimpleChanges,
TemplateRef,
- ViewChild,
ViewChildren,
- ViewEncapsulation
+ ViewEncapsulation,
+ forwardRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { fromEvent, merge, Observable, Subject, Subscription } from 'rxjs';
+import { Observable, Subject, Subscription, fromEvent, merge } from 'rxjs';
import { distinctUntilChanged, filter, map, takeUntil, tap } from 'rxjs/operators';
import { BooleanInput, NumberInput, NzSafeAny } from 'ng-zorro-antd/core/types';
import {
+ InputBoolean,
+ InputNumber,
+ MouseTouchObserverConfig,
arraysEqual,
ensureNumberInRange,
getElementOffset,
getPercent,
getPrecision,
- InputBoolean,
- InputNumber,
isNil,
- MouseTouchObserverConfig,
silentEvent
} from 'ng-zorro-antd/core/util';
@@ -66,63 +65,51 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider
},
NzSliderService
],
- host: {
- '(keydown)': 'onKeyDown($event)'
- },
template: `
-
+
+
+
+
+
`,
imports: [
NzSliderTrackComponent,
@@ -132,7 +119,15 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider
NzSliderMarksComponent,
NgIf
],
- standalone: true
+ standalone: true,
+ host: {
+ class: 'ant-slider',
+ '[class.ant-slider-rtl]': `dir === 'rtl'`,
+ '[class.ant-slider-disabled]': 'nzDisabled',
+ '[class.ant-slider-vertical]': 'nzVertical',
+ '[class.ant-slider-with-marks]': 'marksArray',
+ '(keydown)': 'onKeyDown($event)'
+ }
})
export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
static ngAcceptInputType_nzDisabled: BooleanInput;
@@ -145,7 +140,6 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
static ngAcceptInputType_nzStep: NumberInput;
static ngAcceptInputType_nzReverse: BooleanInput;
- @ViewChild('slider', { static: true }) slider!: ElementRef;
@ViewChildren(NzSliderHandleComponent) handlerComponents!: QueryList;
@Input() @InputBoolean() nzDisabled = false;
@@ -185,6 +179,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
private isNzDisableFirstChange = true;
constructor(
+ public slider: ElementRef,
private sliderService: NzSliderService,
private cdr: ChangeDetectorRef,
private platform: Platform,
diff --git a/components/slider/slider.spec.ts b/components/slider/slider.spec.ts
index f0dd7e6460..0c92fff21e 100644
--- a/components/slider/slider.spec.ts
+++ b/components/slider/slider.spec.ts
@@ -863,17 +863,17 @@ describe('nz-slider', () => {
it('should be disable initially even if nzDisable is set to false', () => {
testComponent.disable();
fixture.detectChanges();
- const firstElementChildSlider = sliderDebugElement.nativeElement.firstElementChild;
+ const sliderElement = sliderDebugElement.nativeElement;
- expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled');
+ expect(sliderElement!.classList).toContain('ant-slider-disabled');
expect(sliderInstance.nzDisabled).toBe(true);
});
it('should disable work', () => {
testComponent.disabled = true;
fixture.detectChanges();
- const firstElementChildSlider = sliderDebugElement.nativeElement.firstElementChild;
+ const sliderElement = sliderDebugElement.nativeElement;
- expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled');
+ expect(sliderElement!.classList).toContain('ant-slider-disabled');
expect(sliderInstance.nzDisabled).toBe(true);
expect(sliderControl.value).toBe(42);
dispatchClickEventSequence(sliderNativeElement, 0.76);
@@ -882,7 +882,7 @@ describe('nz-slider', () => {
testComponent.enable();
fixture.detectChanges();
- expect(firstElementChildSlider!.classList).not.toContain('ant-slider-disabled');
+ expect(sliderElement!.classList).not.toContain('ant-slider-disabled');
expect(sliderInstance.nzDisabled).toBe(false);
dispatchClickEventSequence(sliderNativeElement, 0.76);
fixture.detectChanges();
@@ -890,7 +890,7 @@ describe('nz-slider', () => {
testComponent.disable();
fixture.detectChanges();
- expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled');
+ expect(sliderElement!.classList).toContain('ant-slider-disabled');
expect(sliderInstance.nzDisabled).toBe(true);
dispatchSlideEventSequence(sliderNativeElement, 0.42, 0.19);
fixture.detectChanges();
@@ -1076,7 +1076,7 @@ describe('nz-slider', () => {
});
const styles = `
- ::ng-deep .ant-slider { position: relative; width: 100px; height: 12px; }
+ ::ng-deep .ant-slider { display: block; position: relative; width: 100px; height: 12px; }
::ng-deep .ant-slider .ant-slider-rail { position: absolute; width: 100%; height: 4px; }
::ng-deep .ant-slider .ant-slider-track { position: absolute; height: 4px; }
::ng-deep .ant-slider .ant-slider-handle { position: absolute; margin-left: -7px; margin-top: -5px; width: 14px; height: 14px; }
diff --git a/components/slider/step.component.ts b/components/slider/step.component.ts
index c83314f549..186940e762 100644
--- a/components/slider/step.component.ts
+++ b/components/slider/step.component.ts
@@ -18,17 +18,18 @@ import { NzDisplayedStep, NzExtendedMark } from './typings';
exportAs: 'nzSliderStep',
preserveWhitespaces: false,
template: `
-
-
-
+
`,
imports: [NgStyle, NgForOf],
- standalone: true
+ standalone: true,
+ host: {
+ class: 'ant-slider-step'
+ }
})
export class NzSliderStepComponent implements OnChanges {
static ngAcceptInputType_vertical: BooleanInput;
@@ -79,7 +80,7 @@ export class NzSliderStepComponent implements OnChanges {
active: false,
style: {
[orient]: `${offset}%`,
- transform: 'translateX(-50%)'
+ transform: this.vertical ? 'translateY(50%)' : 'translateX(-50%)'
}
};
});
diff --git a/components/slider/style/entry.less b/components/slider/style/entry.less
index f017363455..a1ec677a4c 100644
--- a/components/slider/style/entry.less
+++ b/components/slider/style/entry.less
@@ -1,3 +1,4 @@
@import './index.less';
+@import './patch.less';
// style dependencies
@import '../../tooltip/style/entry.less';
diff --git a/components/slider/style/patch.less b/components/slider/style/patch.less
new file mode 100644
index 0000000000..487a601b26
--- /dev/null
+++ b/components/slider/style/patch.less
@@ -0,0 +1,3 @@
+.ant-slider {
+ display: block;
+}