Material Design Lite

Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/slider/style.css');

Usage

Start with a input element and add the slider class name and type=“range”:

<input class="slider" type="range">

The slider class name is implicit when used with the input element and type=“range”.

Variants

Default

Default slider styling.

<input class="slider" type="range">

Design Tokens

Token	Description	Default
`--md-sys-comp-slider-container-height`	The height of the container	`36px`
`--md-sys-comp-slider-container-width`	The width of the container	`100%`

Resources

Playground

See the Pen Slider by Rody Davis (@kherrick ) on CodePen.