npm package: @forter/slider
Description: slider from Forter Components
Author: Forter Developers
Latest version: 1.2.0

# fc-slider

An element by Forter
<!-- Author: Omer Anati <omer.anati@forter.com> -->

## Usage

```html
<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`                          |