@forter/slider
v1.2.0
Published
slider from Forter Components
Downloads
3
Readme
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
|