Slider

Sliders allow users to make selections from a range of values.

The fds-slider extends Material web's mwc-slider.

Usage

Import

npm i @finastra/slider

import '@finastra/slider';
...
<fds-slider value="25" min="10" max="50"></fds-slider>

API

Properties

| Property | Attribute | Modifiers | Type | Default | Description | |----------------------------------|-----------------|-----------|-------------------------------------------------|------------|--------------------------------------------------| | ariaDescribedBy | | | string | | | | ariaLabel | | | string | | | | ariaLabelledBy | | | string | | | | disabled | disabled | | boolean | false | Disabled state for the component. When disabled is set to true, thecomponent will not be added to form submission. | | discrete | discrete | | boolean | false | display value above the thumb. | | max | max | | number | 100 | Maximum selectable value of the slider. | | min | min | | number | 0 | Minimum selectable value of the slider. | | name | | | string | | | | ripple | | readonly | Promise<RippleInterface \| null> \| undefined | | Implement ripple getter for Ripple integration with mwc-formfield | | step | step | | number | 1 | The step to increase current value. | | styles | | | CSSResult[] | ["styles"] | | | value | value | | number | 0 | Current selected value. | | valueEnd | | | number | | | | valueToAriaTextTransform | | | ((value: number) => string) \| null | | | | valueToValueIndicatorTransform | | | (value: number) => string | | | | withTickMarks | withTickMarks | | boolean | false | display tick marks for each step on the track. |

Methods

| Method | Type | |----------|--------------------------------------------------| | click | (): void | | layout | (skipUpdateUI?: boolean \| undefined): Promise<void> |

CSS Custom Properties

| Property | Type | Default | Description | |-----------------|-------|-----------|----------------------| | --fds-primary | color | "#694ED6" | Color of the slider. |