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.
npm install --save @material/range-slider
Use exclusively on inputs with type set to range.
<!-- standard -->
<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider" />
<!-- primary -->
<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--primary" />
<!-- Accent -->
<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--accent" />
<!-- disabled -->
<input type="range" class="mdc-range-slider" value="5" min="0" max="10" step="1" disabled="true" />| 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 |
Setting the disabled attribute will supersede class suffixes like primary and accent.
<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--accent" disabled="true" />
<!-- Will Render the same as -->
<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--disabled" />
<!-- And -->
<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider" disabled />