Value Slider Stable New in 3.2 Dark Theme
A Value Slider allows users to view and select from a range of value along a slidable bar.
<uimc-value-slider
>
</uimc-value-slider>| Attribute | Description | Values | Default |
|---|---|---|---|
| input-field | Adds text inputs for typing specific values | – | – |
| thumb-icon | Adds icon into range thumb. | – | – |
| min-value | Sets min-value for slider. | Number | 0 |
| max-value | Sets max-value for slider. | Number | 100 |
| value | Sets initial start value. | Number | – |
| second-value | Sets second initial end value in case of type: double-slider | Number | – |
| type | Type of the slider. | progress, progress-double | – |
| steps | Adds steps for step-slider | Number | – |
| scale | Adds visual scale according to steps value | – | – |
| label | Adds label on top of slider | String | – |
| theme | Sets theme of the slider | light, gray, dark | light |
Default Value Slider
<uimc-value-slider
max-value="100"
value="50"
label="Default"
>
</uimc-value-slider>With progress indication
<uimc-value-slider
type="progress"
max-value="100"
value="50"
label="Progress"
>
</uimc-value-slider>With double handles to select a range
<uimc-value-slider
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="Progress Double"
>
</uimc-value-slider>With icon handles
<uimc-value-slider
thumb-icon
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="With an icon in the thumb handle"
>
</uimc-value-slider>With steps scale
<uimc-value-slider
scale
steps="10"
max-value="100"
value="50"
label="Scale"
>
</uimc-value-slider>With steps scale and double handles
<uimc-value-slider
scale
type="progress-double"
steps="10"
max-value="100"
value="10"
second-value="50"
label="Progress Double"
>
</uimc-value-slider>With steps but no visible scale
<uimc-value-slider
steps="10"
max-value="100"
value="50"
label="Step Slider"
>
</uimc-value-slider>With number inputs
<uimc-value-slider
input-field
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="Input Fields"
>
</uimc-value-slider>Value Slider variants on gray background
Default Value Slider
<uimc-value-slider
theme="gray"
max-value="100"
value="50"
label="Default"
>
</uimc-value-slider>With progress indication
<uimc-value-slider
theme="gray"
type="progress"
max-value="100"
value="50"
label="Progress"
>
</uimc-value-slider>With double handles to select a range
<uimc-value-slider
theme="gray"
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="Progress Double"
>
</uimc-value-slider>With icon handles
<uimc-value-slider
theme="gray"
thumb-icon
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="With an icon in the thumb handle"
>
</uimc-value-slider>With steps scale
<uimc-value-slider
theme="gray"
scale
steps="10"
max-value="100"
value="10"
label="Scale"
>
</uimc-value-slider>With steps scale and double handles
<uimc-value-slider
theme="gray"
scale
type="progress-double"
steps="10"
max-value="100"
value="10"
second-value="50"
label="Progress Double"
>
</uimc-value-slider>With steps but no visible scale
<uimc-value-slider
theme="gray"
steps="10"
max-value="100"
value="10"
label="Step Slider"
>
</uimc-value-slider>With number inputs
<uimc-value-slider
theme="gray"
input-field
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="Input Fields"
>
</uimc-value-slider>Value Slider variants on dark background
Default Value Slider
<uimc-value-slider
theme="dark"
max-value="100"
value="50"
label="Default"
>
</uimc-value-slider>With progress indication
<uimc-value-slider
theme="dark"
type="progress"
max-value="100"
value="50"
label="Progress"
>
</uimc-value-slider>With double handles to select a range
<uimc-value-slider
theme="dark"
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="Progress Double"
>
</uimc-value-slider>With icon handles
<uimc-value-slider
theme="dark"
thumb-icon
type="progress-double"
max-value="100"
value="50"
second-value="50"
label="With an icon in the thumb handle"
>
</uimc-value-slider>With steps scale
<uimc-value-slider
theme="dark"
scale
steps="10"
max-value="100"
value="50"
label="Scale"
>
</uimc-value-slider>With steps scale and double handles
<uimc-value-slider
theme="dark"
scale
type="progress-double"
steps="10"
max-value="100"
value="10"
second-value="50"
label="Progress Double"
>
</uimc-value-slider>With steps but no visible scale
<uimc-value-slider
theme="dark"
steps="10"
max-value="100"
value="50"
label="Step Slider"
>
</uimc-value-slider>With number input
<uimc-value-slider
theme="dark"
input-field
type="progress-double"
max-value="100"
value="10"
second-value="50"
label="Input Fields"
>
</uimc-value-slider>