Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@material/slider

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/slider

The Material Components for the web slider component

10.0.0
Source
npm

Version published: 4 years ago

Weekly downloads: 675K; decreased by-10.11%

Maintainers: 21

Weekly downloads

Created: 8 years ago

What is @material/slider?

@material/slider is a Material Design slider component for the web. It provides a range of features for creating sliders that are consistent with the Material Design guidelines. This package allows developers to create sliders with various configurations, including discrete and continuous sliders, and provides customization options for styling and behavior.

What are @material/slider's main functionalities?

Basic Slider

This code sample demonstrates how to create a basic slider using the @material/slider package. The slider is initialized and an event listener is added to log the value whenever it changes.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@material/slider/dist/mdc.slider.css">
  <script src="https://unpkg.com/@material/slider/dist/mdc.slider.js"></script>
</head>
<body>
  <div class="mdc-slider" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="Select Value">
    <div class="mdc-slider__track-container">
      <div class="mdc-slider__track"></div>
    </div>
    <div class="mdc-slider__thumb-container">
      <div class="mdc-slider__pin">
        <span class="mdc-slider__pin-value-marker"></span>
      </div>
      <svg class="mdc-slider__thumb" width="21" height="21">
        <circle cx="10.5" cy="10.5" r="7.875"></circle>
      </svg>
      <div class="mdc-slider__focus-ring"></div>
    </div>
  </div>
  <script>
    const slider = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'));
    slider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));
  </script>
</body>
</html>

Discrete Slider with Tick Marks

This code sample demonstrates how to create a discrete slider with tick marks using the @material/slider package. The slider is configured to display discrete values and markers along the track.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@material/slider/dist/mdc.slider.css">
  <script src="https://unpkg.com/@material/slider/dist/mdc.slider.js"></script>
</head>
<body>
  <div class="mdc-slider mdc-slider--discrete mdc-slider--display-markers" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="Select Value">
    <div class="mdc-slider__track-container">
      <div class="mdc-slider__track"></div>
      <div class="mdc-slider__track-marker-container"></div>
    </div>
    <div class="mdc-slider__thumb-container">
      <div class="mdc-slider__pin">
        <span class="mdc-slider__pin-value-marker"></span>
      </div>
      <svg class="mdc-slider__thumb" width="21" height="21">
        <circle cx="10.5" cy="10.5" r="7.875"></circle>
      </svg>
      <div class="mdc-slider__focus-ring"></div>
    </div>
  </div>
  <script>
    const slider = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'));
    slider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));
  </script>
</body>
</html>

Range Slider

This code sample demonstrates how to create a range slider using the @material/slider package. The range slider allows users to select a range of values within a specified minimum and maximum.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@material/slider/dist/mdc.slider.css">
  <script src="https://unpkg.com/@material/slider/dist/mdc.slider.js"></script>
</head>
<body>
  <div class="mdc-slider mdc-slider--range" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="Select Value">
    <div class="mdc-slider__track-container">
      <div class="mdc-slider__track"></div>
    </div>
    <div class="mdc-slider__thumb-container">
      <div class="mdc-slider__pin">
        <span class="mdc-slider__pin-value-marker"></span>
      </div>
      <svg class="mdc-slider__thumb" width="21" height="21">
        <circle cx="10.5" cy="10.5" r="7.875"></circle>
      </svg>
      <div class="mdc-slider__focus-ring"></div>
    </div>
    <div class="mdc-slider__thumb-container">
      <div class="mdc-slider__pin">
        <span class="mdc-slider__pin-value-marker"></span>
      </div>
      <svg class="mdc-slider__thumb" width="21" height="21">
        <circle cx="10.5" cy="10.5" r="7.875"></circle>
      </svg>
      <div class="mdc-slider__focus-ring"></div>
    </div>
  </div>
  <script>
    const slider = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'));
    slider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));
  </script>
</body>
</html>

Other packages similar to @material/slider

Slider

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

The MDC Slider implementation supports both single point sliders (one thumb) and range sliders (two thumbs). It is backed by the browser <input type="range"> element, is fully accessible, and is RTL-aware.

Contents

Using sliders

Installing sliders

npm install @material/slider

Styles

@use "@material/slider/styles";

JavaScript instantiation

import {MDCSlider} from '@material/slider';

const slider = new MDCSlider(document.querySelector('.mdc-slider'));

Note: See Importing the JS component for more information on how to import JavaScript.

Making sliders accessible

Sliders are backed by an <input> element, meaning that they are fully accessible. Unlike the ARIA-based slider, MDC sliders are adjustable using touch-based assistive technologies such as TalkBack on Android.

Per the spec, ensure that the following attributes are added to the input element(s):

value: Value representing the current value.
min: Value representing the minimum allowed value.
max: Value representing the maximum allowed value.
aria-label or aria-labelledby: Accessible label for the slider.

If the value is not user-friendly (e.g. a number to represent the day of the week), also set the following:

aria-valuetext: Set this input attribute to a string that makes the slider value understandable, e.g. 'Monday'.
Add a function to map the slider value to aria-valuetext via the MDCSlider#setValueToAriaValueTextFn method.

Sliders

There are two types of sliders:

Continuous slider

Continuous sliders allow users to make meaningful selections that don’t require a specific value.

Note: The step size for value quantization is, by default, 1. To specify a custom step size, provide a value for the step attribute on the input element.

<div class="mdc-slider">
  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

Continuous range slider

<div class="mdc-slider mdc-slider--range">
  <input class="mdc-slider__input" type="range" min="0" max="70" value="30" name="rangeStart" aria-label="Continuous range slider demo">
  <input class="mdc-slider__input" type="range" min="30" max="100" value="70" name="rangeEnd" aria-label="Continuous range slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

Discrete slider

Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to select an exact value.

To create a discrete slider, add the following:

mdc-slider--discrete class on the root element.
Value indicator element (mdc-slider__value-indicator-container), as shown below.

<div class="mdc-slider mdc-slider--discrete">
  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10" aria-label="Discrete slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
      <div class="mdc-slider__value-indicator">
        <span class="mdc-slider__value-indicator-text">
          50
        </span>
      </div>
    </div>
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

Discrete slider with tick marks

Discrete sliders can optionally display tick marks. Tick marks represent predetermined values to which the user can move the slider.

To add tick marks to a discrete slider, add the following:

mdc-slider--tick-marks class on the root element
mdc-slider__tick-marks element as a child of the mdc-slider__track element
mdc-slider__tick-mark--active and mdc-slider__tick-mark--inactive elements as children of the mdc-slider__tick-marks element

<div class="mdc-slider mdc-slider--discrete mdc-slider--tick-marks">
  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10" aria-label="Discrete slider with tick marks demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
    <div class="mdc-slider__tick-marks">
      <div class="mdc-slider__tick-mark--active"></div>
      <div class="mdc-slider__tick-mark--active"></div>
      <div class="mdc-slider__tick-mark--active"></div>
      <div class="mdc-slider__tick-mark--active"></div>
      <div class="mdc-slider__tick-mark--active"></div>
      <div class="mdc-slider__tick-mark--active"></div>
      <div class="mdc-slider__tick-mark--inactive"></div>
      <div class="mdc-slider__tick-mark--inactive"></div>
      <div class="mdc-slider__tick-mark--inactive"></div>
      <div class="mdc-slider__tick-mark--inactive"></div>
      <div class="mdc-slider__tick-mark--inactive"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
      <div class="mdc-slider__value-indicator">
        <span class="mdc-slider__value-indicator-text">
          50
        </span>
      </div>
    </div>
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

Discrete range slider

<div class="mdc-slider mdc-slider--range mdc-slider--discrete">
  <input class="mdc-slider__input" type="range" min="0" max="50" value="20" step="10" name="rangeStart" aria-label="Discrete range slider demo">
  <input class="mdc-slider__input" type="range" min="20" max="100" value="50" step="10" name="rangeEnd" aria-label="Discrete range slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
      <div class="mdc-slider__value-indicator">
        <span class="mdc-slider__value-indicator-text">
          20
        </span>
      </div>
    </div>
    <div class="mdc-slider__thumb-knob"></div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__value-indicator-container" aria-hidden="true">
      <div class="mdc-slider__value-indicator">
        <span class="mdc-slider__value-indicator-text">
          50
        </span>
      </div>
    </div>
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

Other variants

Disabled slider

To disable a slider, add the following:

mdc-slider--disabled class on the root element
disabled attribute on the input element

<div class="mdc-slider mdc-slider--disabled">
  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" step="10" disabled name="volume" aria-label="Disabled slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

Additional information

Initialization with custom ranges and values

When MDCSlider is initialized, it reads the input element's min, max, and value attributes if present, using them to set the component's internal min, max, and value properties.

Use these attributes to initialize the slider with a custom range and values, as shown below:

<div class="mdc-slider">
  <input class="mdc-slider__input" aria-label="Slider demo" min="0" max="100" value="75">
  <!-- ... -->
</div>

Setting slider position before component initialization

When MDCSlider is initialized, it updates the slider track and thumb positions based on the internal value(s). To set the correct track and thumb positions before component initialization, mark up the DOM as follows:

Calculate rangePercentDecimal, the active track range as a percentage of the entire track, i.e. (valueEnd - valueStart) / (max - min). Set transform:scaleX(<rangePercentDecimal>) as an inline style on the mdc-slider__track--active_fill element.
Calculate thumbEndPercent, the initial position of the end thumb as a percentage of the entire track. Set left:calc(<thumbEndPercent>% - 24px) as an inline style on the end thumb (mdc-slider__thumb) element (or right for RTL layouts).
[Range sliders only] Calculate thumbStartPercent, the initial position of the start thumb as a percentage of the entire track. Set left:calc(<thumbStartPercent>% - 24px) as an inline style on the start thumb (mdc-slider__thumb) element (or right for RTL layouts).
[Range sliders only] Using the previously calculated thumbStartPercent, set left:<thumbStartPercent>% as an inline style on the mdc-slider__track--active_fill element (or right for RTL layouts).

Additionally, the MDCSlider component should be initialized with skipInitialUIUpdate set to true.

Range slider example

This is an example of a range slider with internal values of [min, max] = [0, 100] and [start, end] = [30, 70].

<div class="mdc-slider mdc-slider--range">
  <input class="mdc-slider__input" type="range" min="0" max="70" value="30" name="rangeStart" aria-label="Range slider demo">
  <input class="mdc-slider__input" type="range" min="30" max="100" value="70" name="rangeEnd" aria-label="Range slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"
           style="transform:scaleX(.4); left:30%"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb" style="left:calc(30%-24px)">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
  <div class="mdc-slider__thumb" style="left:calc(70%-24px)">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

API

Sass mixins

Mixin	Description
`track-active-color($color)`	Sets the color of the active track.
`track-inactive-color($color, $opacity)`	Sets the color and opacity of the inactive track.
`thumb-color($color)`	Sets the color of the thumb.
`thumb-ripple-color($color)`	Sets the color of the thumb ripple.
`tick-mark-active-color($color)`	Sets the color of tick marks on the active track.
`tick-mark-inactive-color($color)`	Sets the color of tick marks on the inactive track.
`value-indicator-color($color, $opaicty)`	Sets the color and opacity of the value indicator.
`value-indicator-text-color($color, $opaicty)`	Sets the color of the value indicator text.

`MDCSlider` events

Event name	`event.detail`	Description
`MDCSlider:change`	`MDCSliderChangeEventDetail`	Emitted when a value has been changed and committed from a user event. Mirrors the native `change` event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
`MDCSlider:input`	`MDCSliderChangeEventDetail`	Emitted when a value has been changed from a user event. Mirrors the native `input` event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

`MDCSlider` methods

Method Signature	Description
`getValueStart() => number`	Gets the value of the start thumb (only applicable for range sliders).
`setValueStart(valueStart: number) => void`	Sets the value of the start thumb (only applicable for range sliders).
`getValue() => number`	Gets the value of the thumb (for single point sliders), or the end thumb (for range sliders).
`setValue(value: number) => void`	Sets the value of the thumb (for single point sliders), or the end thumb (for range sliders).
`getDisabled() => boolean`	Gets the disabled state of the slider.
`setDisabled(disabled: boolean) => void`	Sets the disabled state of the slider.
`setValueToAriaValueTextFn((mapFn: ((value: number) => string) \| null) => void`	Sets a function that maps the slider value to value of the `aria-valuetext` attribute on the thumb element. If not set, the `aria-valuetext` attribute is unchanged when the value changes.

Usage within frameworks

If you are using a JavaScript framework such as React or Angular, you can create a slider for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

See MDCSliderAdapter and MDCSliderFoundation for up-to-date code documentation of slider foundation API's.

10.0.0 (2021-02-05)

Bug Fixes

data-table: fix style ordering wrt select & use new variable-width mixin (afb6889), closes #6599
dialog: add property to customize suppressDefaultPressSelector (772cc10)
linear-progress: fix RTL rendering (c7c5da2)
list: add support for density scaling. (419e035)
list: add support for non-interactive list roles. (fc8b045)
list: ensure divider appears in IE high contrast mode. (eff7b46)
menu: Remove anchorSize height from calculations when anchored to bottom (1631198)
notched-outline: fix notched outline no-label style (99cfb6b)
select: debounce click on anchor (b39094d)
select: set aria-expanded false earlier when menu closes (df00c2b)
slider: Add aria-hidden to value indicator container, to avoid duplicate value announcements for screenreader users. (9687353)
slider: Adjust hidden input dimensions to take slider dimensions, such that screenreader focus indicators show a highlight around the entire slider. (fd22355)
slider: Fire custom change event on input change. (07deaec)
slider: Fix bug where value indicator container took space and could be hovered over / clicked when hidden. (832668d)
slider: Mark ripple event handler as passive. Fixes #6746 (abdd100)
slider: Remove big step options. Now that we're using a native range input, big step is not customizable - we follow browser defaults for big step. (ae27b44)
slider: Update both thumbs' value indicator UI's if layout is invoked with undefined thumb. (489d4c2)
slider: Use pointer-events: none instead of visibility: hidden to hide the value indicator container. Adding visibility: hidden removes the exit animation since the value indicator is immediately hidden. (a94bd8d)
slider: Use mouse/touch events on iOS, to work around pointer events bug. (671d72d), closes #6715
tabs: Expose min width mixin and set to 90px per spec. (c4ab987)
theme: ensure either() works with false values (8e66dbf)
tooltip: Adds "will-change" into CSS to prevent the tooltip from "jittering" when animating in. (7a003ac)
tooltip: Change foundation to check for "dialog" on the anchor element's aria-haspopup attribute instead of checking for "true". (b8a1a58)
tooltip: Clear hideTimeout in handleAnchorMouseEnter so that the tooltip will not be hidden if the user rapidly moves the mouse in and out of the anchor element. (365c693)
tooltip: Fix rich tooltip tests to not use aria-describedby to associate rich tooltips with their anchor elements. This is because interactive rich tooltips should not be used with aria-describedby per a11y guidance. (251ac04)
adjust meta baseline and update color mixins. (07f3e01)

Code Refactoring

Remove MDC theme's deep-get, used sass:map's get API instead. (37fbae1)

Features

banner: Add mobile-stacked variant support to banner. (a0b2db2)
button: Add in HCM support to the mdc button as an opt-in mixin. (121e1f3)
button: consolidate states into button mixins (637d15d)
button: thread state keys through theme config (05f2496)
checkbox: Add CSS custom properties to MDC checkbox for density theming (9244508)
checkbox: Add validation to MDC Checkbox theme mixin (2d5f32d)
circular-progress: do not require HTML without whitespaces (8648b82)
dialog: add custom property for z-index (776c186)
dialog: Adding styling for scroll bar dividers, and adding logic to show said dividers only when content is scrolled "behind" the header or footer of the dialog. (e383944)
dialog: Adds and defines styling for the "header bar" on a full-screen dialog. (089de51)
iconbutton: Add in HCM support to the mdc iconbutton as an opt-in mixin. (fd61b04)
linear-progress: remove aria-valuemin/max attrs for indeterminate (4321323)
list: support ctrl + a keyboard shortcut (eefef49), closes #6366
list: Update the MDC component for List Evolution. (766981c)
menu,select: enable fixed menu position in mwc-select (b9adb7a), closes #2062
select: add mixin for variable width (30c11bf)
slider: Add hidden input to slider, to support forms submission. This is also prep for moving to use an <input type="range"> behind the scenes, in order to support touch-based AT's. (b98d15d)
slider: Modify continuous slider to use step value by default, and give clients the option to customize step value for continuous sliders. (7ad038e)
slider: Use input with type="range" to back slider component. This ensures that sliders can be adjusted with touch-based assistive technologies, as the current ARIA spec for sliders is not compatible with e.g. TalkBack/Android. (9083b7d)
snackbar: Add 1px transparent border for high contrast support (15a4d40)
theme: add either() utility function (5268222)
theme: add validation option to disallow custom properties (fec7b42)
theme: Added validation mixin to validate provided theme configuration keys (1c156d6)
theme: allow lists in replace maps (d2959b1)
theme: emit CSS var() declarations when provided a standalone custom prop (1a3a396)
tooltip: Add positioning adjustment and position specification for rich tooltips. Rich tooltips default to the END position and does not support CENTER positioning. (384a8ee)
tooltip: Added persistent variant for rich tooltips that shows/hides based on mouse clicks on the anchor element. Clicks on elements other than the anchor will also hide the persistent variant. (9775856)
tooltip: Adds transform-origin on tooltip surface so tooltip entrance animation has a direction based on its alignment with the anchor element. (623af86)
tooltip: Adjust tooltip position on scroll and resize events. This ensures that the tooltip remains pinned to the anchor element despite page movement. (a415276)
tooltip: Adjusting tooltip positioning logic so that the tooltip remains within the viewport even if the anchor element is partially off-screen. (482ff90)
tooltip: Change rich tooltip to use position absolute instead of fixed and rely on a position relative parent element so that if the parent has a transform, perspective, or filter property set to something other than none, the positioning would still work. (0c95c9f)
tooltip: Define styling to set the full-screen dialog size depending on the viewport size. (fe13dd1)
tooltip: Expose hide and isShown methods in the MDCTooltip component. This allows MDC clients to create their own class to enforce only one tooltip being shown at a time. (c5e18b0)
tooltip: Hide rich tooltip if mouse leaves rich tooltip. Rich tooltip persists if mouse leaves rich tooltip and enters anchor. (6d8574f)
tooltip: Reducing minimum threshold distance between tooltip and viewport from 32px to 8px. (23491cf)
tooltip: Restore focus to the anchor element when the ESC button is pressed while the focus is in the tooltip for rich tooltips. Default rich tooltips should have focus restored to anchor and not have rich tooltips show. (eabf9d5)
tooltip: Set up base sass for rich tooltip. Rich tooltips are currently in development and is not yet ready for use. (4ae94ff)
tooltip: Set up rich tooltip to persist if mouse leaves anchor and enters rich tooltip. (c927a5d)
tooltip: The aria-expanded attribute of the anchor element will only be changed for anchor elements with interactive rich tooltips. Non-interactive rich tooltip anchor elements do not have the aria-haspopup and aria-expanded attributes. (c5dda80)
tooltip: When the anchor element blurs, the rich tooltip will only be hidden if the focus is changed to a non-rich tooltip element. (6871336)
Added global variable to conditionally emit CSS selector fallback declarations (7b0e2b3)
tooltip: When the rich tooltip element focuses out, hide the rich tooltip if the new focused element is not the anchor element or an element within the rich tooltip. (1085c3b)

BREAKING CHANGES

theme: custom-properties.apply() has been renamed to declaration() to better align with css.declaration()
tooltip: Added adapter methods:
- getComputedStyleProperty(propertyName: string): string;
- getParentBoundingRect(): ClientRect|null;
tooltip: Added adapter method:
- tooltipContainsElement(element: HTMLElement): boolean;
Removed deep-get() API from mdc-theme, use sass:map's get() API instead.
tooltip: Added adapter method:
- anchorContainsElement(element: HTMLElement): boolean;
slider: Slider is now backed by an input of type="range". Additionally, adapter methods (focusInput, isInputFocused, registerInputEventHandler, deregisterInputEventHandler) were added.
tooltip: Added adapter methods:
- setAnchorAttribute(attr: string, value: string): void;
- registerEventHandler<K extends EventType>( evtType: K, handler: SpecificEventListener<K>): void;
- deregisterEventHandler<K extends EventType>( evtType: K, handler: SpecificEventListener<K>): void;
slider: Adds slider adapter methods (get/setInputValue, get/setInputAttribute, removeInputAttribute). Slider DOM structure now contains a hidden input.

Keywords

FAQs

What is @material/slider?

Is @material/slider popular?

Is @material/slider well maintained?

Package last updated on 05 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@material/slider

What is @material/slider?

What are @material/slider's main functionalities?

Other packages similar to @material/slider

rc-slider

nouislider

react-slider

Slider

Using sliders

Installing sliders

Styles

JavaScript instantiation

Making sliders accessible

Sliders

Continuous slider

Continuous range slider

Discrete slider

Discrete slider with tick marks

Discrete range slider

Other variants

Disabled slider

Additional information

Initialization with custom ranges and values

Setting slider position before component initialization

Range slider example

API

Sass mixins

MDCSlider events

MDCSlider methods

Usage within frameworks

10.0.0 (2021-02-05)

Bug Fixes

Code Refactoring

Features

BREAKING CHANGES

Keywords

Related posts

Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts

Supply Chain Attack on Rspack npm Packages Injects Cryptojacking Malware

Skuld Infostealer Returns to npm with Fake Windows Utilities and Malicious Solara Development Packages

`MDCSlider` events

`MDCSlider` methods