Input Slider

Basic usage

Negative mode

The Input Slider component supports a negative mode, suitable for areas with dark background.

Prefilled value

You can initialize the Input Slider component with a prefilled value.

Prefilled value with formControl

You can initialize the Input Slider component with a prefilled value, and bind a formControl to control the input

Defining a custom step

By default, the Input Slider allows any integer value within the defined range; however, you can change that by defining the interval between selectable values on the Slider.

Customizing the track labels

By default, the track labels reflect the minimum and maximum allowed values as they are passed to the component; however, you can customize them when the raw value is not user-friendly or clear for your purposes.

Discrete values

You can set the Input Slider component to display a discrete set of values, instead of a linear scale.

Vertical slider

You can set the orientation of the Input Slider component to vertical.

Setting the track labels position

Basing on the Input Slider’s orientation, you can choose where to display the track labels relative to the track.

Hiding the track labels

You can hide the track labels altogether, if you don’t need them in your use case.

Showing a tooltip on the track

You can set the Input Slider component so that a tooltip is displayed when hovering the track. The tooltip will follow the movements of the cursor along the track.

Showing inputs next to the slider

You can configure the Input Slider component to display input fields, showing either a single input or multiple inputs depending on the slider type (single or range). The max and min values will be positioned on the opposite side of the slider.