Whether to always show the value on the thumb.
The color of the slider
Whether the control is disabled.
Whether to show the value of the slider on the thumb.
The floating label for a field.
The maximum value of the slider.
The minimum value of the slider.
Executed with an input value from user.
The step value of the slider.
The interval between ticks.
Wether value of the field should be emitted when user is blurred out of the control.
Value of the input.
<drayman-slider />
Slider powered by Angular Material library.
Example of usage
Orange slider with thumb label always on
export const component: DraymanComponent = async ({ forceUpdate }) => { let currentValue = 0; return () => { return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', flexDirection: 'column' }}> <drayman-slider onValueChange={async ({ value }) => { currentValue = value; await forceUpdate(); }} enableThumbLabel color="orange" alwaysOnThumb min={-1000} max={1000} value={currentValue} /> <div>Current value on server: {currentValue}</div> </div> ); } }