0.27.0 • Published 2 years ago

@material/mwc-slider v0.27.0

Weekly downloads
2,081
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-slider> Published on npm

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

Sliders allow users to make selections from a range of values.

Material Design Guidelines: sliders

Demo

Installation

npm install @material/mwc-slider

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

⚠️🚧 MWC Slider is currently under active development 🚧⚠️

work still to be done:

  • enabling theme custom properties
  • component testing (and any subsequent changes that result from testing)

Example usage

Continuous

<script type="module">
  import '@material/mwc-slider/mwc-slider.js';
</script>

<mwc-slider value="25" min="10" max="50"></mwc-slider>

Discrete

<mwc-slider
    discrete
    withTickMarks
    step="5"
    max="50"
    value="10">
</mwc-slider>

Range Continuous

<script type="module">
  import '@material/mwc-slider/slider-range.js.js';
</script>

<mwc-slider-range
    min="-20"
    max="20"
    valueStart="-10"
    valueEnd="5">
</mwc-slider-range>

Range Discrete

<mwc-slider-range
    discrete
    withTickMarks
    step="1.5"
    min="3"
    max="12"
    valueStart="4.5"
    valueEnd="9">
</mwc-slider-range>

API

Properties/Attributes

<mwc-slider>

NameTypeDefaultDescription
valuenumber0Current value of the slider.
valueEndnumber0Proxy of value.
minnumber0Value representing the minimum allowed value.
maxnumber0Value representing the maximum allowed value.
disabledbooleanfalseDisables the slider, preventing interaction.
stepnumber1Step for value quantization.
discretebooleanfalseDisplays a numeric value label upon pressing the thumb which allows the user to select an exact value.
withTickMarksnumber0Displays tick marks which represent predetermind values to which the user can move the slider. NOTE: the slider must be discrete to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. (max - min) % step === 0

<mwc-slider-range>

NameTypeDefaultDescription
valueStartnumber0Current value of the start thumb handle.
valueEndnumber0Current value of the end thumb handle.
minnumber0Value representing the minimum allowed value.
maxnumber0Value representing the maximum allowed value.
disabledbooleanfalseDisables the slider, preventing interaction.
stepnumber1Step for value quantization.
discretebooleanfalseDisplays a numeric value label upon pressing the thumb which allows the user to select an exact value.
withTickMarksnumber0Displays tick marks which represent predetermind values to which the user can move the slider. NOTE: the slider must be discrete to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. (max - min) % step === 0

Methods

NameDescription
valueToValueIndicatorTransform(value: number) => stringOverride this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the aria-valuetext.
layout(skipUpdateUI = false) => Promise<void>Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.

Events

Event NameDetailDescription
input{value: number, thumb: Thumb}*Fired when the value changes due to user input. Similar to the input event of the native <input type="range"> element, the input event will not fire when value is modified via JavaScript.
change{value: number, thumb: Thumb}*Fired when the value changes and the user has finished interacting with the slider. Similar to the change event of the native <input type="range"> element, the change event will not fire when value is modified via JavaScript.

* Thumb is a TypeScript enum exported by this component with types START and END

CSS Custom Properties

⚠️🚧 In Progress 🚧⚠️

NameDefaultDescription

Global Custom Properties

⚠️🚧 In Progress and subject to change soon 🚧⚠️

This component exposes the following global theming custom properties.

NameDescription
--mdc-theme-primarySets the color of the knob and filled track when slider is active.
--mdc-theme-on-primarySets the color of the text in the pin.
--mdc-theme-on-surfaceSets the color of the knob and filled track when slider is disabled.
--mdc-typography-subtitle2-<PROPERTY>Styles the typography of slider's value indicators.

Additional references

0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.25.1

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.2

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.0

4 years ago

0.11.1

4 years ago

0.10.0

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.0

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago