Slider ⚠️ Experimental ​

The Slider component can be used imported from:

Playground ​

Parameters ​

Events ​

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
changenumberReturns the new value of the model
restartedvoidEmitted on value reset

Parameters use ​

Check the documentation about how to use the parameters.

model ​

Attention!

If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

The model parameter is used to set the value of the slider. Make sure the value is within the range

label ​

The label parameter is used to set the label of the slider.

We can also use the label slot:

Slider

name ​

The name parameter is used to set the name of the slider. This name will be used when submitting the form.

range ​

The range parameter is used to set the range of the slider. The range must be an array with two values, the first value is the minimum value, and the second value is the maximum value.

If no value is provided it uses [0, 100].

min ​

Instead of using range we can use just min. This overrides the range value.

max ​

Instead of using range we can use just max. This overrides the range value.

icon-right ​

This parameter is used to set an icon on the right side of the slider. Use the icon name from the Icon component.

icon-left ​

Same as icon-right, but the icon will be on the left side of the slider.

Flags ​

disabled ​

Flag used to block the interaction with the slider, and it will not be possible to change the value.

invalid ​

We can set the invalid attribute as for any other WebComponent input:

This affects the style of the entire input:

show-max ​

Flag used to show the maximum value of the slider.

show-min ​

Flags used to show the minimum value of the slider.

Methods ​

reset() ​

We can all the reset() method of the WebComponent in order to reset the value. This will clean the internal states and emit the nullable value with the change event, plus a restarted event:

In this example, the button triggers the method:

Value:  50

The reset is done to 0.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​