diff --git a/docs/release-notes-editor.txt b/docs/release-notes-editor.txt
index 6959179010ad2594b036659d0df97a6d5140e271..54ea4d886c8967446aae80bdf1be3c9293223859 100644
--- a/docs/release-notes-editor.txt
+++ b/docs/release-notes-editor.txt
@@ -1,5 +1,8 @@
Editor
======
+1.24.0
+- - Show arrow for slider in number line mode
+
1.23.0
- Fix setting of the default z-index for frames
- Use dot instead of comma as thousands separator in number line
diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 2713990c80d57f787c1e27b0e421b504349065b2..e602131b69b5782ae77792ad70c1ec2cc91ef86b 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -1,5 +1,8 @@
Player
======
+1.18.0
+- Show arrow for slider in number line mode
+
1.17.0
- Add animation for fixed virtual keyboard
- Fix the display of dynamic elements with negative z-index
diff --git a/projects/common/ui-elements/slider/slider.component.ts b/projects/common/ui-elements/slider/slider.component.ts
index d212e76006d275399b316cdb83709fbbc2774431..e38ad534b3f3075b3f5738bb402508d7a2925ab5 100644
--- a/projects/common/ui-elements/slider/slider.component.ts
+++ b/projects/common/ui-elements/slider/slider.component.ts
@@ -14,58 +14,96 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize">
<div *ngIf="elementModel.label"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- {{elementModel.label}}
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ {{elementModel.label}}
</div>
- <div fxFlex fxLayout="row">
- <div *ngIf="elementModel.showValues" fxFlex
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- {{elementModel.minValue | number:'':'de'}}
+ <div #valueContainer
+ [class.values]="elementModel.label && !elementModel.showValues">
+ <div fxFlex fxLayout="row" fxLayoutAlign="space-between">
+ <div #valueMin
+ class="value-container-min">
+ <div *ngIf="elementModel.showValues"
+ class="value-container">
+ <div
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ {{elementModel.minValue | number:'':'de'}}
+ </div>
+ <div *ngIf="elementModel.barStyle" class="number-marker"></div>
+ </div>
+ </div>
+ <div #valueMax
+ [class.value-container-max]="elementModel.barStyle">
+ <div *ngIf="elementModel.showValues"
+ class="value-container">
+ <div
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ {{elementModel.maxValue | number:'':'de'}}
+ </div>
+ <div *ngIf="elementModel.barStyle"
+ class="number-marker">
+ </div>
+ </div>
+ </div>
</div>
- <div [style.display]="'flex'"
- [style.flex-direction]="'column'"
- [style.width.%]="100"
- [style.height.%]="100">
- <mat-slider
+ </div>
+ <div *ngIf="elementModel.barStyle"
+ fxFlex fxLayout="row" fxLayoutAlign="space-between center"
+ [style.margin-top.px]="elementModel.showValues ? -18 : 0"
+ [style.margin-left.px]="valueMin.offsetWidth/2">
+ <div class="arrow-line"></div>
+ <div class="arrow-head"></div>
+ </div>
+ <div [style.display]="'flex'"
+ [style.flex-direction]="'column'"
+ [style.height.%]="100"
+ [style.margin-right.px]="elementModel.barStyle ? valueMax.offsetWidth/2 - 8 : valueMax.offsetWidth"
+ [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
+ [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
+ <mat-slider
[class]="elementModel.barStyle ? 'bar-style' : ''"
[thumbLabel]="elementModel.thumbLabel"
[formControl]="elementFormControl"
[style.width.%]="100"
[max]="elementModel.maxValue"
[min]="elementModel.minValue">
- </mat-slider>
- <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
- {{elementModel.requiredWarnMessage}}
- </mat-error>
- </div>
- <div *ngIf="elementModel.showValues"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- {{elementModel.maxValue | number:'':'de'}}</div>
+ </mat-slider>
+ <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
+ {{elementModel.requiredWarnMessage}}
+ </mat-error>
</div>
</div>
`,
styles: [
- ':host ::ng-deep .bar-style .mat-slider-thumb {border-radius: 0; width: 10px; height: 40px; bottom: -15px}',
- ':host ::ng-deep .bar-style .mat-slider-track-fill { background-color: rgba(0,0,0,.38);}',
- ':host ::ng-deep .bar-style .mat-slider-track-background { background-color: rgba(0,0,0,.38);}'
+ '.values {margin-top: 10px;}',
+ '.value-container {text-align: center;}',
+ '.value-container-max {min-width: 100px}',
+ '.value-container-min {min-width: 8px}',
+ '.arrow-line {height: 2px; width: 100%; background-color: #555;}',
+ '.number-marker {width: 2px; height: 20px; background-color: #555; margin: 10px auto 0 auto}',
+ // eslint-disable-next-line max-len
+ '.arrow-head {width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 20px solid #555;}',
+ // eslint-disable-next-line max-len
+ ':host ::ng-deep .bar-style .mat-slider-thumb {border-radius: 0; width: 9px; height: 40px; bottom: -20px; margin-right: 5px;}',
+ ':host ::ng-deep .bar-style .mat-slider-track-fill { background-color: rgba(0,0,0,0);}',
+ ':host ::ng-deep .bar-style .mat-slider-track-background { background-color: rgba(0,0,0,0);}'
]
})
export class SliderComponent extends FormElementComponent implements OnInit {