@finastra/slider NPM

Slider

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

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

npm i @finastra/slider

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

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.