Slider¶

A Slider provides a visual indication of adjustable content, where the user can increase or decrease the value by moving the slider thumb along a horizontal track.

Usage¶

Slider

Sliders allow users to view and select a value from the range along a horizontal track. They’re ideal for adjusting settings such as volume and brightness where accuracy is not of highest importance.

The buttons can be used to make small adjustments in either direction, while the slider thumb can be used for larger adjustments.

Changes made with sliders take effect immediately, allowing users to make slider adjustments with direct feedback.

When to use¶

Use it for making selections from a range of values.
Use it when the range is more important than precision.

Best practices¶

Use a regular value input, if a user needs to enter a precise number.
Sliders shouldn’t be used to adjust settings with any delay in providing user feedback.

Code¶

Usage¶

import { SiSliderComponent } from '@siemens/element-ng/slider';

@Component({
  imports: [SiSliderComponent, ...]
})

SiSliderComponent API Documentation¶

selector

si-slider

Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.

Input Properties¶

Name	Type	Default	Description
decrementLabel ¶	`TranslatableString`	$localize`:@@SI_SLIDER.DECREMENT:Decrement`	Text for aria-label of decrement. Needed for a11y.
disabled ¶	`boolean`	`false`
id ¶	`string`	`__si-slider-${SiSliderComponent.idCounter++}`
incrementLabel ¶	`TranslatableString`	$localize`:@@SI_SLIDER.INCREMENT:Increment`	Text for aria-label of increment. Needed for a11y.
labelledby ¶	`string`	`${this.id()}-label`
max ¶	`number`	`100`	Maximum of slider range.
maxLabel ¶	`string`	`''`	Label to describe maximum of slider range.
min ¶	`number`	`0`	Minimum of slider range.
minLabel ¶	`string`	`''`	Label to describe minimum of slider range.
sliderLabel ¶	`TranslatableString`	$localize`:@@SI_SLIDER.LABEL:Value`	Text for aria-label of slider. Needed for a11y
step ¶	`number`	`1`	Interval to step through the slider.
thumbIcon ¶	`string`		Icon to use as the slider thumb.
value ¶	`number`		Current value of slider.

Output Properties¶

Name	Type	Description
valueChange ¶	`number`	Current value of slider.

Types Documentation¶

SI_FORM_ITEM_CONTROL `InjectionToken`<`SiFormItemControl`> = ...¶ Variable

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

SiFormItemControl

¶

Interface

Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.

Properties
Generated ID that the SiFormItemComponent will assign to the element containing the error messages. Implementations of SiFormItemControl must generate this ID and assign it to the `aria-describedby` attribute of their focusable elements. This property will be required with v48. errormessageId?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
The actual id of the control that should be used in the `for` attribute of a label. id?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
If the control is meant to be used a checkbox. This affects the label positioning. isFormCheck?: `boolean`¶
ID that should be assigned to the label element inside the SiFormItemComponent . If the target control is not of type input, select or button, it cannot be referenced by a label. Instead, aria-labelledby must be used to create a reference to a label. In such a case, an implementation of SiFormItemControl must provide the id of the label in labelledby . SiFormItemComponent will apply the id to the label so that it can be used inside the control to reference it in the aria-labelledby attribute. labelledby?: (`null` \| `string` \| `Signal`<(`undefined` \| `string`)>)¶

Translatable ¶ import imported from @siemens/element-translate-ng

SiFormError

¶

Interface

Properties
key: `string`¶
message?: `string`¶
params: `any`¶

SiFormValidationErrorMapper

¶

Interface

Interface for form error mapper. It resolves a key to either a translatable string or function which is called with the validation error for its key and should return a translatable string.

Index signature: [ key: string ]: (undefined | string | (error: any) => string)¶

Properties
dateFormat?: (`TranslatableString` \| (error: { format: `string` }) => `TranslatableString`)¶
email?: (`TranslatableString` \| (error: { email: `boolean` }) => `TranslatableString`)¶
max?: (`TranslatableString` \| (error: { actual: `number`, max: `number` }) => `TranslatableString`)¶
maxDate?: (`TranslatableString` \| (error: { actual: `Date`, max: `Date` }) => `TranslatableString`)¶
maxLength?: (`TranslatableString` \| (error: { actualLength: `number`, requiredLength: `number` }) => `TranslatableString`)¶
min?: (`TranslatableString` \| (error: { actual: `number`, min: `number` }) => `TranslatableString`)¶
minDate?: (`TranslatableString` \| (error: { actual: `Date`, min: `Date` }) => `TranslatableString`)¶
minLength?: (`TranslatableString` \| (error: { actualLength: `number`, requiredLength: `number` }) => `TranslatableString`)¶
numberFormat?: (`TranslatableString` \| (error: { numberFormat: `boolean` }) => `TranslatableString`)¶
pattern?: (`TranslatableString` \| (error: { pattern: (`string` \| `RegExp`) }) => `TranslatableString`)¶
required?: (`TranslatableString` \| (error: { required: `boolean` }) => `TranslatableString`)¶
requiredTrue?: (`TranslatableString` \| (error: { required: `boolean` }) => `TranslatableString`)¶

Breakpoints

¶

Interface

Properties
lgMinimum: `number`¶
mdMinimum: `number`¶
smMinimum: `number`¶
xlMinimum: `number`¶
xxlMinimum: `number`¶

SiFormItemComponent

implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy¶

Class

▶

Constructor
() => `{}`¶

Properties
container: (`null` \| `SiFormContainerComponent`<{ [ key: `string` ]: `AbstractControl`<`any`, `any`> } }>) = ...¶
controlElementRef: `Signal`<(`undefined` \| `ElementRef`<`HTMLElement`>)> = ...¶
Disables the automatic error printing. Error printing will be enabled by default in v46. disableErrorPrinting: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
errors: `WritableSignal`<`SiFormError`[]> = ...¶
fieldControl: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlNative: `WritableSignal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlQuery: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldset: (`null` \| `SiFormFieldsetComponent`) = ...¶
formErrorMapper: `InputSignal`<(`undefined` \| `SiFormValidationErrorMapper`)> = ...¶
hasRequiredValidator: `WritableSignal`<`boolean`> = ...¶
The label to be displayed in the form item. It will be translated if a translation key is available. label: `InputSignal`<(`undefined` \| `null` \| `string`)> = ...¶
A custom width value to be applied to the label. A value of 0 is allowed as well to visually hide away the label area. Numbers will be converted to pixels. Using numbers is discouraged and might be dropped. Example: `labelWidth="100px"` labelWidth: `InputSignal`<(`undefined` \| `string` \| `number`)> = ...¶
labelWidthCssVar: `Signal`<(`undefined` \| `string`)> = ...¶
ngControl: `Signal`<(`undefined` \| `NgControl`)> = ...¶
previousErrors?: (`null` \| `ValidationErrors`)¶
printErrors: `Signal`<`boolean`> = ...¶
required: `Signal`<`boolean`> = ...¶
Defines that this form item is required for the overall form to be valid. requiredInput: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
requiredTestControl: `FormControl`<(`null` \| `string`)> = ...¶
requiredValidator: `Signal`<(`undefined` \| `RequiredValidator`)> = ...¶
validationErrorService: `SiFormValidationErrorService` = ...¶
validator?: (`null` \| `ValidatorFn`)¶

Accessors
get formItemErrormessageId: (`null` \| `string`)¶
get formItemId: (`null` \| `string`)¶
get formItemLabelledBy: (`null` \| `string`)¶

Methods

A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
ngAfterContentChecked: () => void from AfterContentChecked.ngAfterContentChecked¶

A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit¶

ngOnChanges

(changes: SimpleChanges) => void from OnChanges.ngOnChanges¶

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

Parameters
The changed properties. changes: `SimpleChanges`¶

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy¶

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit¶

updateRequiredState: () => void¶

updateValidationMessages: () => void¶

SiFormContainerComponent

<(TControl: { [ K in keyof TControl ]: AbstractControl })>¶

Class

▶

Constructor
() => `{}`¶

Properties
The container hosts the form within a siResizeContainer to configure the breakpoint for different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints input. contentContainerBreakpoints: `InputSignal`<(`undefined` \| `Breakpoints`)> = ...¶
A map the maps from control names of the form to their translate keys. The initial map is empty and the user is responsible to add the required translate keys. controlNameTranslateKeyMap: `InputSignal`<`Map`<`string`, `string`>> = `new Map<string, string>()`¶
In some scenarios, one may not want the form container to be responsible for the layout relevant `si-container-[xs\|...]` classes, but let this be done by a different, nested component, e.g. by a group box. In these cases, the property should be set to true. disableContainerBreakpoints: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Disables the automatic error printing in all nested SiFormItemComponent . Error printing will be enabled by default in v46. disableErrorPrinting: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Every validation error has an errorCode. This map holds translate keys for error codes. The keys can be used to display a translated message for each validation error. The defaults old english readable key defaults for the Angular standard validators of the `Validators` class like `min` , `max` or `required` . Use the input to set your own translate keys for the form validators you need. errorCodeTranslateKeyMap: `InputSignal`<(`undefined` \| `SiFormValidationErrorMapper` \| `Map`<`string`, `string`>)> = ...¶
Set the form entity to the container to enable the overall form validation on in the form container edit panel. form: `InputSignal`<(`undefined` \| `FormGroup`<`TControl`>)> = ...¶
formErrorMapper: `Signal`<{ [ key: `string` ]: (`undefined` \| `string` \| (error: `any`) => `string`) } }> = ...¶
hasParentContainer: `boolean` = ...¶
A custom width value to be applied to all labels. Example: `labelWidth="100px".` labelWidth: `InputSignal`<(`undefined` \| `string`)> = ...¶
A form container in readonly mode is only displaying the form content without ability to change it. The edit panel with typically save and cancel buttons is hidden. Set to true to display the edit panel. readonly: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶

Accessors
Indicates whether the content editor message shall be styled as warning. Returns `true` , if SiFormContainerComponent.userInteractedWithForm is true and the form is invalid. get invalidFormContainerMessage: `boolean`¶
Indicates whether the user interacted with the form. Returns `true` , if the user selected at least one form element and [blurred] https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event by losing focus again (e.g. by setting focus on another element), or by editing the content of a form element. Otherwise `false` . get userInteractedWithForm: `boolean`¶
Indicates whether content editor message shall be styled as success. Returns `true` , if SiFormContainerComponent.userInteractedWithForm is true and the form is valid. get validFormContainerMessage: `boolean`¶

Methods

getControlNameTranslateKey

(controlName: string) => (undefined | string)¶

Parameters
controlName: `string`¶

SiFormFieldsetComponent

implements DoCheck¶

Class

▶

Constructor
() => `{}`¶

Properties
errors: `Signal`<`SiFormError`[]> = ...¶
formItems: `WritableSignal`<`SiFormItemComponent`[]> = ...¶
hasOnlyRadios: `Signal`<`boolean`> = ...¶
Switches all child inputs to inline mode inline: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
isRequired: `Signal`<`boolean`> = ...¶
The label for the entire fieldset. label: `InputSignal`<`string`> = ...¶
labelId: `string` = ...¶
Overrides the parent label width. labelWidth: `InputSignal`<(`undefined` \| `string`)> = ...¶
Adds a required marker to the label required: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
touched: `WritableSignal`<`boolean`> = ...¶
labelIdCounter: `number` = `0`¶

Methods

A callback method that performs change-detection, invoked after the default change-detector runs. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.
ngDoCheck: () => void from DoCheck.ngDoCheck¶

registerFormItem

(item: SiFormItemComponent) => void¶