Slider

A slider component.

Properties

Name
Default
Description
min
The minimum value of the slider.
max
The maximum value of the slider.
value
The current value of the slider.
step
1
The step value of the slider. The value will be rounded to the nearest multiple of this number.
dots
false
Whether to show dots on the slider track.
disabled
false
Whether the slider is disabled.

Usage

Basic slider

<Slider 
    min={0} 
    max={100} 
    step={1} 
    bind:value 
/>

with Dots

This example also uses the on:change event instead of binding.

<Slider 
    min={0} 
    max={10} 
    dots
    value={progress}
    on:change={e => progress = e.detail}
/>