Licence
Apache-2.0
Version
1.2.0
Deps
1
Size
82 kB
Vulns
0
Weekly
0
fc-slider
An element by Forter
Usage
<script>
import '@forter/slider';
</script>
<fc-slider label="Max items" marks=[{"value":"50","label":"faster"},{"value":"100"},{"value":"500"},{"value":"1000"},{"value":"2000","label":"slower"}]>
</fc-slider>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled |
disabled |
boolean |
false | If the element is disabled. |
dragThumbThrottled |
any |
|||
label |
label |
boolean |
"" | The main label. |
marks |
marks |
any[] |
Config of the marks. | |
value |
value |
boolean |
The current value. |
Events
| Event |
|---|
change |
CSS Custom Properties
| Property | Description |
|---|---|
--fc-slider-disabled-label-color |
disabled label color. example: pink |
--fc-slider-disabled-thumb-color |
disabled thumb color. example: pink |
--fc-slider-disabled-thumb-trail-color |
disabled thumb trail color. example: pink |
--fc-slider-disabled-track-color |
disabled track color. example: pink |
--fc-slider-disabled-track-mark-color |
disabled mark color. example: pink |
--fc-slider-disabled-value-color |
disabled mark value color. example: pink |
--fc-slider-disabled-value-label-color |
disabled mark value secondary label color. example: pink |
--fc-slider-height |
width. example: 8px |
--fc-slider-label-color |
label color. example: pink |
--fc-slider-label-font |
label font. example: var(--fc-font-11px-300) |
--fc-slider-label-height |
label height. example: 40px |
--fc-slider-label-margin |
label margin. example: 10px |
--fc-slider-label-text-transform |
label text transform. example: uppercase |
--fc-slider-thumb-box-shadow |
thumb box shadow. example: 0 0 0 0 black |
--fc-slider-thumb-color |
thumb color. example: pink |
--fc-slider-thumb-size |
thumb size. example: 20px |
--fc-slider-thumb-trail-color |
thumb trail color. example: pink |
--fc-slider-track-color |
track color. example: pink |
--fc-slider-track-mark-color |
mark color. example: pink |
--fc-slider-value-color |
mark value color. example: pink |
--fc-slider-value-label-color |
mark value secondary label color. example: pink |
--fc-slider-width |
width. example: 200px |