Sliders

The Slider component is a better visualization of the number input. It is used for gathering numerical user data.

API

Examples

Below is a collection of simple to complex examples.

Min and Max Values

You can set min and max values of sliders.

Disabled

You cannot interact with disabled sliders.

Readonly

You cannot interact with readonly sliders, but they look as ordinary ones.

Icons

You can add icons to the slider with the append-outer and prepend-outer slots.

Thumb

You can display a thumb.

Inverse Label

Slider with inverseLabel property displays label at the end of it.

Step

Steps are predetermined values to which the user can move the slider.

Colors

You can set custom colors for slider and thumb with the help of color and thumbClass.

Range

Range sliders.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.



Last Updated: 2022-10-03