# Slider Component

Sliders allow users to select from a range of values.

## Usage {#usage}

Import the component:

```js
import 'mdui/components/slider.js';
```

Import the TypeScript type:

```ts
import type { Slider } from 'mdui/components/slider.js';
```

Example:

```html
<mdui-slider></mdui-slider>
```

## Examples {#examples}

### Default Value {#example-value}

The `value` property lets you read or set the slider's value.

```html
<mdui-slider value="50"></mdui-slider>
```

### Disabled State {#example-disabled}

Add the `disabled` attribute to disable the slider.

```html
<mdui-slider disabled></mdui-slider>
```

### Range {#example-min-max}

Use the `min` and `max` attributes to set the slider's minimum and maximum values.

```html
<mdui-slider min="10" max="20"></mdui-slider>
```

### Step Interval {#example-step}

Use the `step` attribute to set the slider's step interval.

```html
<mdui-slider step="10"></mdui-slider>
```

### Tickmarks {#example-tickmarks}

Add the `tickmarks` attribute to show tickmarks on the slider.

```html
<mdui-slider tickmarks step="10"></mdui-slider>
```

### Hide Value Label {#example-nolabel}

Add the `nolabel` attribute to hide the value label.

```html
<mdui-slider nolabel></mdui-slider>
```

### Customize Value Label {#example-labelFormatter}

The `labelFormatter` property lets you customize the value label's display format. It takes the slider's current value and returns the text to display.

```html
<mdui-slider class="example-label-formatter"></mdui-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} hours`;
</script>
```

## mdui-slider API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>false</td>
    <td>number</td>
    <td>0</td>
    <td><p>The value of the slider, which is submitted with form data.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>defaultValue</td>
    <td>false</td>
    <td>number</td>
    <td>0</td>
    <td><p>The default value. The slider resets to this value when the form is reset. JavaScript only.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Whether the element is focused when the page loads.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>The element&#39;s tab order when navigating with the Tab key.</p>
</td>
  </tr>
  <tr>
    <td>min</td>
    <td>min</td>
    <td>true</td>
    <td>number</td>
    <td>0</td>
    <td><p>Specifies the minimum value. Default is <code>0</code>.</p>
</td>
  </tr>
  <tr>
    <td>max</td>
    <td>max</td>
    <td>true</td>
    <td>number</td>
    <td>100</td>
    <td><p>Specifies the maximum value. Default is <code>100</code>.</p>
</td>
  </tr>
  <tr>
    <td>step</td>
    <td>step</td>
    <td>true</td>
    <td>number</td>
    <td>1</td>
    <td><p>Specifies the step interval. Default is <code>1</code>.</p>
</td>
  </tr>
  <tr>
    <td>tickmarks</td>
    <td>tickmarks</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Adds tickmarks to the slider.</p>
</td>
  </tr>
  <tr>
    <td>nolabel</td>
    <td>nolabel</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Hides the value label.</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Disables the slider.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Associates the slider with a <code>&lt;form&gt;</code> element. Set this to the <code>id</code> of a <code>&lt;form&gt;</code> in the same document. If omitted, the slider uses its parent <code>&lt;form&gt;</code>, if any.</p>
<p>This lets the slider work with any form in the document, not just the one it is nested in.</p>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Specifies the slider&#39;s name, which is submitted with form data.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validity</td>
    <td>false</td>
    <td>ValidityState</td>
    <td></td>
    <td><p>A <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noopener nofollow"><code>ValidityState</code></a> object that represents the element&#39;s validity states.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validationMessage</td>
    <td>false</td>
    <td>string</td>
    <td></td>
    <td><p>Validation message. Empty string when valid.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>labelFormatter</td>
    <td>false</td>
    <td>(value: number) =&gt; string</td>
    <td></td>
    <td><p>Specifies a function to format the tooltip&#39;s value. The function receives the slider&#39;s value as an argument and should return a string to display in the tooltip.</p>
</td>
  </tr>
</tbody>
</table>

### Methods

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Simulates a mouse click on the element.</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Sets focus on the element. An optional object parameter may include a <code>preventScroll</code> property. If <code>preventScroll</code> is set to <code>true</code>, the page will not scroll to bring the focused element into view.</p>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Removes focus from the element.</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Checks the validity of the form field. If it is invalid, it triggers an <code>invalid</code> event and returns <code>false</code>. If valid, it returns <code>true</code>.</p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Checks the validity of the form field. If it is invalid, it triggers an <code>invalid</code> event, returns <code>false</code>, and displays a validation message. If valid, it returns <code>true</code>.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Sets a custom error message. If the message is non-empty, the field is considered invalid.</p>
</td>
  </tr>
</tbody>
</table>

### Events

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Emitted when the slider gains focus.</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Emitted when the slider loses focus.</p>
</td>
  </tr>
  <tr>
    <td>change</td>
    <td><p>Emitted when the value changes and the slider loses focus.</p>
</td>
  </tr>
  <tr>
    <td>input</td>
    <td><p>Emitted when the value changes.</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Emitted when the form control&#39;s validity is checked and it does not meet the constraints.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>track-inactive</td>
    <td><p>Inactive track.</p>
</td>
  </tr>
  <tr>
    <td>track-active</td>
    <td><p>Active track.</p>
</td>
  </tr>
  <tr>
    <td>handle</td>
    <td><p>Slider handle.</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>Value label.</p>
</td>
  </tr>
  <tr>
    <td>tickmark</td>
    <td><p>Tick mark.</p>
</td>
  </tr>
</tbody>
</table>