diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index 994678a1877..12dad4a6091 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -34,10 +34,6 @@ @include e(thumb-#{$t}) { @extend %igx-thumb-display !optional; - .label { - @extend %igx-thumb-label !optional; - } - .dot { @extend %igx-thumb-dot !optional; } @@ -46,12 +42,24 @@ @include e(thumb-#{$t}, $m: active) { @extend %igx-thumb--active !optional; + .dot { + @extend %igx-thumb-dot--active !optional; + } + } + + @include e(label-#{$t}) { + @extend %igx-label-display !optional; + .label { - @extend %igx-thumb-label--active !optional; + @extend %igx-thumb-label !optional; } + } - .dot { - @extend %igx-thumb-dot--active !optional; + @include e(label-#{$t}, $m: active) { + @extend %igx-thumb--active !optional; + + .label { + @extend %igx-thumb-label--active !optional; } } } @@ -91,10 +99,6 @@ @extend %igx-thumb-display !optional; @extend %igx-thumb--disabled !optional; - .label { - @extend %igx-thumb-label !optional; - } - .dot { @extend %igx-thumb-dot--disabled !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index c4c7fb0550c..0911ee72477 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -166,13 +166,26 @@ } } - %igx-thumb-label { + %igx-label-display { position: absolute; display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: $slider-thumb-height; + outline-style: none; + top: -#{rem($slider-thumb-radius)}; + margin: 0 auto; + } + + %igx-thumb-label { + position: relative; + display: flex; align-items: center; justify-content: center; flex: 0 0 auto; - top: -#{rem($slider-thumb-height - 6px)}; + top: -#{rem($slider-thumb-height - 4px)}; + left: -50%; pointer-events: none; min-width: rem($slider-label-width); height: rem($slider-label-height); @@ -181,7 +194,7 @@ margin: 0 auto; font-size: $slider-label-font-size; font-weight: $slider-label-font-weight; - line-height: 1; + line-height: rem(18px); color: --var($theme, 'label-text-color'); background: --var($theme, 'label-background-color'); opacity: 0; diff --git a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.html b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.html new file mode 100644 index 00000000000..106ded41207 --- /dev/null +++ b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.html @@ -0,0 +1,7 @@ +
+ +
+ + + {{ value }} + diff --git a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts new file mode 100644 index 00000000000..c90ee59335d --- /dev/null +++ b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts @@ -0,0 +1,63 @@ +import { Component, NgModule, Input, TemplateRef, HostBinding, ElementRef } from '@angular/core'; +import { SliderHandle } from '../slider.common'; + +@Component({ + selector: 'igx-thumb-label', + templateUrl: 'thumb-label.component.html' +}) +export class IgxThumbLabelComponent { + private _active: boolean; + + @Input() + public value: number; + + @Input() + public templateRef: TemplateRef; + + @Input() + public context: any; + + @Input() + public type: SliderHandle; + + @Input() + public continuous: boolean; + + @HostBinding('class.igx-slider__label-from') + public get thumbFromClass() { + return this.type === SliderHandle.FROM; + } + + @HostBinding('class.igx-slider__label-to') + public get thumbToClass() { + return this.type === SliderHandle.TO; + } + + @HostBinding('class.igx-slider__label-from--active') + public get thumbFromActiveClass() { + return this.type === SliderHandle.FROM && this.active; + } + + @HostBinding('class.igx-slider__label-to--active') + public get thumbToActiveClass() { + return this.type === SliderHandle.TO && this.active; + } + + constructor(private _elementRef: ElementRef) { } + + public get nativeElement() { + return this._elementRef.nativeElement; + } + + public get active() { + return this._active; + } + + public set active(val: boolean) { + if (this.continuous) { + return; + } + + this._active = val; + } +} diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index de4ee12e912..55d850694f8 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -3,7 +3,15 @@
- + + - + + +
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index 533ab821758..4c855dc0359 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -25,6 +25,7 @@ import { SliderHandle, SliderType, ISliderValueChangeEventArgs } from './slider.common'; +import { IgxThumbLabelComponent } from './label/thumb-label.component'; const noop = () => { @@ -110,6 +111,12 @@ export class IgxSliderComponent implements @ViewChildren(IgxSliderThumbComponent) private thumbs: QueryList = new QueryList(); + /** + * @hidden + */ + @ViewChildren(IgxThumbLabelComponent) + private labelRefs: QueryList = new QueryList(); + private get thumbFrom(): IgxSliderThumbComponent { return this.thumbs.find(thumb => thumb.type === SliderHandle.FROM); } @@ -118,6 +125,14 @@ export class IgxSliderComponent implements return this.thumbs.find(thumb => thumb.type === SliderHandle.TO); } + private get labelFrom(): IgxThumbLabelComponent { + return this.labelRefs.find(label => label.type === SliderHandle.FROM); + } + + private get labelTo(): IgxThumbLabelComponent { + return this.labelRefs.find(label => label.type === SliderHandle.TO); + } + /** * @hidden */ @@ -651,7 +666,7 @@ export class IgxSliderComponent implements const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom; activeThumb.nativeElement.setPointerCapture($event.pointerId); - this.showThumbsIndicators(); + this.showSliderIndicators(); } @@ -665,7 +680,7 @@ export class IgxSliderComponent implements return; } - this.hideThumbsIndicators(); + this.hideSliderIndicators(); } /** @@ -673,7 +688,7 @@ export class IgxSliderComponent implements */ @HostListener('focus') public onFocus() { - this.toggleThumbLabels(); + this.toggleSliderIndicators(); } /** @@ -686,12 +701,12 @@ export class IgxSliderComponent implements @HostListener('panstart') public onPanStart() { - this.showThumbsIndicators(); + this.showSliderIndicators(); } @HostListener('panend') public onPanEnd() { - this.hideThumbsIndicators(); + this.hideSliderIndicators(); } /** @@ -848,9 +863,10 @@ export class IgxSliderComponent implements this.subscribeTo(this.thumbTo, this.thumbChanged.bind(this)); this.thumbs.changes.pipe(takeUntil(this._destroyer$)).subscribe(change => { - const t = change.find((thumb: IgxSliderThumbComponent) => thumb.type === SliderHandle.FROM); - this.positionHandle(t, this.lowerValue); - this.subscribeTo(t, this.thumbChanged.bind(this)); + const thumbFrom = change.find((thumb: IgxSliderThumbComponent) => thumb.type === SliderHandle.FROM); + const labelFrom = this.labelRefs.find((label: IgxThumbLabelComponent) => label.type === SliderHandle.FROM); + this.positionHandle(thumbFrom, labelFrom, this.lowerValue); + this.subscribeTo(thumbFrom, this.thumbChanged.bind(this)); this.changeThumbFocusableState(this.disabled); }); } @@ -969,11 +985,11 @@ export class IgxSliderComponent implements * @hidden */ public onThumbChange() { - this.toggleThumbLabels(); + this.toggleSliderIndicators(); } public onHoverChange(state: boolean) { - return state ? this.showThumbsIndicators() : this.hideThumbsIndicators(); + return state ? this.showSliderIndicators() : this.hideSliderIndicators(); } private swapThumb(value: IRangeSliderValue) { @@ -1049,20 +1065,22 @@ export class IgxSliderComponent implements )` : interval; } - private positionHandle(handle: ElementRef, position: number) { - if (!handle) { + private positionHandle(thumbHandle: ElementRef, labelHandle: ElementRef, position: number) { + if (!thumbHandle) { return; } - handle.nativeElement.style.left = `${this.valueToFraction(position) * 100}%`; + const positionLeft = `${this.valueToFraction(position) * 100}%`; + thumbHandle.nativeElement.style.left = positionLeft; + labelHandle.nativeElement.style.left = positionLeft; } private positionHandlesAndUpdateTrack() { if (!this.isRange) { - this.positionHandle(this.thumbTo, this.value as number); + this.positionHandle(this.thumbTo, this.labelTo, this.value as number); } else { - this.positionHandle(this.thumbTo, (this.value as IRangeSliderValue).upper); - this.positionHandle(this.thumbFrom, (this.value as IRangeSliderValue).lower); + this.positionHandle(this.thumbTo, this.labelTo, (this.value as IRangeSliderValue).upper); + this.positionHandle(this.thumbFrom, this.labelFrom, (this.value as IRangeSliderValue).lower); } this.updateTrack(); @@ -1098,7 +1116,7 @@ export class IgxSliderComponent implements this.renderer.setStyle(this.ticks.nativeElement, 'background', renderCallbackExecution); } - private showThumbsIndicators() { +private showSliderIndicators() { if (this.disabled) { return; } @@ -1109,13 +1127,18 @@ export class IgxSliderComponent implements } this.thumbTo.showThumbIndicators(); + this.labelTo.active = true; if (this.thumbFrom) { this.thumbFrom.showThumbIndicators(); } + if (this.labelFrom) { + this.labelFrom.active = true; + } + } - private hideThumbsIndicators() { + private hideSliderIndicators() { if (this.disabled) { return; } @@ -1123,15 +1146,20 @@ export class IgxSliderComponent implements this._indicatorsTimer = timer(this.thumbLabelVisibilityDuration); this._indicatorsTimer.pipe(takeUntil(this._indicatorsDestroyer$)).subscribe(() => { this.thumbTo.hideThumbIndicators(); + this.labelTo.active = false; if (this.thumbFrom) { this.thumbFrom.hideThumbIndicators(); } + + if (this.labelFrom) { + this.labelFrom.active = false; + } }); } - private toggleThumbLabels() { - this.showThumbsIndicators(); - this.hideThumbsIndicators(); + private toggleSliderIndicators() { + this.showSliderIndicators(); + this.hideSliderIndicators(); } private changeThumbFocusableState(state: boolean) { @@ -1240,8 +1268,18 @@ export class IgxSliderComponent implements * @hidden */ @NgModule({ - declarations: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxSliderThumbComponent], - exports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxSliderThumbComponent], + declarations: [ + IgxSliderComponent, + IgxThumbFromTemplateDirective, + IgxThumbToTemplateDirective, + IgxSliderThumbComponent, + IgxThumbLabelComponent], + exports: [ + IgxSliderComponent, + IgxThumbFromTemplateDirective, + IgxThumbToTemplateDirective, + IgxSliderThumbComponent, + IgxThumbLabelComponent], imports: [CommonModule] }) export class IgxSliderModule { diff --git a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.html b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.html index 7d4d1b33d04..a4431984361 100644 --- a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.html @@ -1,9 +1 @@ -
- -
- - - - {{ value }} - diff --git a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts index 78d9bcc0b6a..4ded53b004a 100644 --- a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts @@ -23,7 +23,7 @@ import { Subject } from 'rxjs'; }) export class IgxSliderThumbComponent implements OnInit, OnDestroy { - private _isActiveLabel = false; + private _isActive = false; private _isPressed = false; private _destroy$ = new Subject(); @@ -92,12 +92,12 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy { @HostBinding('class.igx-slider__thumb-from--active') public get thumbFromActiveClass() { - return this.type === SliderHandle.FROM && this._isActiveLabel; + return this.type === SliderHandle.FROM && this._isActive; } @HostBinding('class.igx-slider__thumb-to--active') public get thumbToActiveClass() { - return this.type === SliderHandle.TO && this._isActiveLabel; + return this.type === SliderHandle.TO && this._isActive; } @HostBinding('class.igx-slider__thumb--pressed') @@ -218,7 +218,7 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy { this._isPressed = visible; if (!this.continuous) { - this._isActiveLabel = visible; + this._isActive = visible; } } }