@forter/slider

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