mds-input-range

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | ----------- |
| disabled | disabled | Sets if the component is disabled | boolean \| undefined | undefined |
| formatValue | -- | A function to custom how value is represented | ((value: number) => string) \| undefined | undefined |
| max | max | The greatest value in the range of permitted values | number | 100 |
| min | min | The lowest value in the range of permitted values | number | 0 |
| step | step | The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. | number | 1 |
| value | value | The value attribute contains a number which contains a representation of the selected number. | number | undefined |

Events

| Event | Description | Type |
| --------------------- | ------------------------------------- | --------------------- |
| mdsInputRangeChange | Emits when the input range is changed | CustomEvent |

Shadow Parts

| Part | Description |
| ---------- | ------------------------------------------------------------------ |
| "header" | The element containing the labels displayed over the input element |

CSS Custom Properties

| Name | Description |
| --------------------------------------------- | ------------------------------------------------ |
| --mds-input-range-thumb-background | |
| --mds-input-range-thumb-size | Sets the thumb width and height of the component |
| --mds-input-range-track-background | |
| --mds-input-range-track-progress-background | |
| --mds-input-range-track-size | |

Dependencies

$3

- mds-text

$3

``mermaid
graph TD;
mds-input-range --> mds-text
style mds-input-range fill:#f9f,stroke:#333,stroke-width:4px
``

----------------------------------------------

Built with love @ Gruppo Maggioli from R&D Department