Slider

Sliders provide a way for 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 allows you to read or set the slider's value.

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

Code

Disabled State

The disabled attribute can be used to disable the slider.

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

Code

Range

The min and max attributes allow you to set the slider's minimum and maximum values.

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

Code

Step Interval

The step attribute allows you to set the slider's step interval.

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

Code

Tickmarks

The tickmarks attribute can be used to add tickmarks to the slider.

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

Code

Hide Tooltip

The nolabel attribute can be used to hide the slider's tooltip.

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

Code

Modify Tooltip

The labelFormatter property allows you to modify the tooltip's display format. This property is a function that takes the slider's current value as a parameter and returns the display text.

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

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

Code

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. This can only be set via a JavaScript property.
`autofocus`	`autofocus`	`boolean`	`false`
Determines if the element should be focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
Specifies the order in which the element receives focus 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 tooltip.
`disabled`	`disabled`	`boolean`	`false`
Disables the slider.
`form`	`form`	`string`	-
Associates the slider with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the slider is associated with its parent `<form>`, if any. This attribute allows slider elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.
`name`	`name`	`string`	`''`
Specifies the slider's name, which is submitted with the form data.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
The element's validation message. This is empty if the element meets its constraints.
	`labelFormatter`	`(value: number) => string`	-
Specifies a function to format the tooltip's value. The function should take the slider's value as an argument and 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 parameter can be an object with 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's invalid, it triggers an `invalid` event and returns `false`. If it's valid, it returns `true`.
`reportValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event, returns `false`, and displays a validation message. If it's valid, it returns `true`.
`setCustomValidity`	`message: string`	`void`
Sets a custom error message. If the text is non-empty, it indicates that the field is 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 doesn't meet the constraints.

CSS Parts

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

Switch

Up Next

RangeSlider