> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mastermindcms.com/llms.txt
> Use this file to discover all available pages before exploring further.

# msm-range

> Web-компонент msm-range.

`msm-range` — web-компонент на Lit.

## Назначение

Переиспользуемый UI-блок.

## Пример

```html theme={null}
<msm-range></msm-range>
```

## Атрибуты / свойства

| Имя        | Тип       | По умолчанию                | Примечания |
| ---------- | --------- | --------------------------- | ---------- |
| `variant`  | RangeType | -                           |            |
| `unit`     | string    | -                           |            |
| `step`     | number    | `this.step ? this.step : 1` |            |
| `min`      | number    | `this.min ? this.min : 0`   |            |
| `max`      | number    | `this.max ? this.max : 1`   |            |
| `disabled` | boolean   | -                           |            |
| `multiple` | boolean   | -                           |            |
| `required` | boolean   | -                           |            |

## События

| Событие             | detail  | Когда |
| ------------------- | ------- | ----- |
| `msm-range-changed` | `value` |       |

### Пример

```html theme={null}
<msm-range>
</msm-range>

<script>
  const el = document.querySelector("msm-range");
  el.addEventListener("msm-range-changed", (e) => {
    console.log(e.detail);
  });

</script>
```

## CSS parts

* `base`
* `progress`

## Слоты

Документированных слотов нет.

## Методы

* `validate()`

## Примечания

* Custom events bubble.