Slider

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

Basic

Value: 30

<me-slider value="30"></me-slider>

Colors

<me-slider value="40" color="primary"></me-slider> <me-slider value="50" color="secondary"></me-slider> <me-slider value="60" color="error"></me-slider>

Small Size

<me-slider size="small" value="30"></me-slider>

With Marks

<me-slider value="30" min="0" max="100" step="10" marks></me-slider>

Value Label

<me-slider value="50" value-label-display="on"></me-slider> <me-slider value="50" value-label-display="auto"></me-slider> <me-slider value="50" value-label-display="off"></me-slider>

Min / Max / Step

<me-slider value="0.3" min="0" max="1" step="0.1" value-label-display="auto"></me-slider>

Disabled

<me-slider value="30" disabled></me-slider>

API

Attribute / Property	Type	Default	Description
`value`	number	0	Current value.
`min`	number	0	Minimum value.
`max`	number	100	Maximum value.
`step`	number	1	Granularity of steps.
`color`	primary \| secondary \| error \| warning \| info \| success	primary	Track and thumb color.
`size`	small \| medium	medium	Slider size.
`marks`	boolean \| JSON	—	Show tick marks. Pass JSON array for custom marks.
`value-label-display`	auto \| on \| off	auto	When to show the value label.
`disabled`	boolean	false	Disables interaction.

Events

Event	Detail	Description
`me-change`	`{ value: number }`	Fired when the value changes.