MDC Range Slider
MDC Range slider is a scss component to style ranged inputs implementing as much of Material Design slider component guidelines as possible with the non-standard pseudo-elements use to style ranged input selectors in Geko, Edge, Blink and WebKit layout engines.
Installation
npm install --save @material/range-slider
Usage
Use exclusively on inputs with type set to range.
<!-- standard --> <!-- primary --> <!-- Accent --> <!-- disabled --> Modifiers
| Class | Description |
|---|---|
| mdc-range-slider | Base slider |
| mdc-range-slider mdc-range-slider-primary | Colours the slider with the primary colour |
| mdc-range-slider mdc-range-slider--accent | Colours the sloder with the accent colour |
| mdc-range-slider mdc-range-slider--disabled | adds disabled colouring to the slider, can also be done by adding a disabled attribute |
Disabled inputs
Setting the disabled attribute will supersede class suffixes like primary and accent.
<!-- Will Render the same as --><!-- And -->