Slider

Sliders allow users to select from a range of values.

Usage

Import the component:

import 'mdui/components/slider.js';

Import the TypeScript type:

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

Example:

<mdui-slider></mdui-slider>

Examples

Default Value

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

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

Source

Disabled State

Add the disabled attribute to disable the slider.

<mdui-slider disabled></mdui-slider>

Source

Range

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

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

Source

Step Interval

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

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

Source

Tickmarks

Add the tickmarks attribute to show tickmarks on the slider.

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

Source

Hide Value Label

Add the nolabel attribute to hide the value label.

<mdui-slider nolabel></mdui-slider>

Source

Customize Value Label

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.

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

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

Source

API

Properties

Attribute	Property	Type	Default
`value`	`value`	`number`	`0`
The value of the slider, which is submitted with form data.
	`defaultValue`	`number`	`0`
The default value. The slider resets to this value when the form is reset. JavaScript only.
`autofocus`	`autofocus`	`boolean`	`false`
Whether the element is focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
The element's tab order when navigating with the Tab key.
`min`	`min`	`number`	`0`
Specifies the minimum value. Default is `0`.
`max`	`max`	`number`	`100`
Specifies the maximum value. Default is `100`.
`step`	`step`	`number`	`1`
Specifies the step interval. Default is `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Adds tickmarks to the slider.
`nolabel`	`nolabel`	`boolean`	`false`
Hides the value label.
`disabled`	`disabled`	`boolean`	`false`
Disables the slider.
`form`	`form`	`string`	-
Associates the slider with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the slider uses its parent `<form>`, if any. This lets the slider work with any form in the document, not just the one it is nested in.
`name`	`name`	`string`	`''`
Specifies the slider's name, which is submitted with form data.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
Validation message. Empty string when valid.
	`labelFormatter`	`(value: number) => string`	-
Specifies a function to format the tooltip's value. The function receives the slider's value as an argument and should return a string to display in the tooltip.

Methods

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

Events

Name
`focus`
Emitted when the slider gains focus.
`blur`
Emitted when the slider loses focus.
`change`
Emitted when the value changes and the slider loses focus.
`input`
Emitted when the value changes.
`invalid`
Emitted when the form control's validity is checked and it does not meet the constraints.

CSS Parts

Name
`track-inactive`
Inactive track.
`track-active`
Active track.
`handle`
Slider handle.
`label`
Value label.
`tickmark`
Tick mark.

SegmentedButton

Snackbar