Expressive Slider

Demo

Centered Gap

Code

<mdc-expressive-slider type="centered" value="-25" size="medium"></mdc-expressive-slider>
<mdc-expressive-slider type="centered" value="0" size="medium"></mdc-expressive-slider>
<mdc-expressive-slider type="centered" value="25" size="medium"></mdc-expressive-slider>

Direction

Code

<mdc-expressive-slider></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical"></mdc-expressive-slider>

Disabled

Code

<div>
    <mdc-expressive-slider disabled value="0"></mdc-expressive-slider>
    <mdc-expressive-slider disabled value="25"></mdc-expressive-slider>
    <mdc-expressive-slider disabled value="50"></mdc-expressive-slider>
    <mdc-expressive-slider disabled value="75"></mdc-expressive-slider>
    <mdc-expressive-slider disabled value="100"></mdc-expressive-slider>
</div>

<div>
<mdc-expressive-slider disabled type="centered" value="0"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="25"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="50"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="75"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="100"></mdc-expressive-slider>
</div>

<div>
<mdc-expressive-slider disabled type="centered" value="0"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="-25"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="-50"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="-75"></mdc-expressive-slider>
<mdc-expressive-slider disabled type="centered" value="-100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider disabled type="range" value-start="0" value-end="0"></mdc-expressive-slider>
    <mdc-expressive-slider disabled type="range" value-start="0" value-end="50"></mdc-expressive-slider>
    <mdc-expressive-slider disabled type="range" value-start="0" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider disabled type="range" value-start="20" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider disabled type="range" value-start="50" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider disabled type="range" value-start="100" value-end="100"></mdc-expressive-slider>
</div>

<mdc-expressive-slider disabled labeled value="50"></mdc-expressive-slider>
<mdc-expressive-slider disabled labeled type="range" value-start="20" value-end="80"></mdc-expressive-slider>

Edge Inset

Code

<mdc-expressive-slider value="0" ticks step="10" size="medium"></mdc-expressive-slider>
<mdc-expressive-slider value="50" ticks step="10" size="medium"></mdc-expressive-slider>
<mdc-expressive-slider value="100" ticks step="10" size="medium"></mdc-expressive-slider>

Labeled

Code

<mdc-expressive-slider labeled value="50"></mdc-expressive-slider>
<mdc-expressive-slider labeled type="centered" value="50"></mdc-expressive-slider>
<mdc-expressive-slider labeled type="centered" value="-30"></mdc-expressive-slider>
<mdc-expressive-slider labeled type="range" value-start="20" value-end="80"></mdc-expressive-slider>

Range Split

Code

<mdc-expressive-slider type="range" value-start="20" value-end="80" size="medium"></mdc-expressive-slider>

Range

Code

<mdc-expressive-slider type="range" value-start="20" value-end="80"></mdc-expressive-slider>
<mdc-expressive-slider type="range" value-start="10" value-end="30"></mdc-expressive-slider>
<mdc-expressive-slider type="range" value-start="70" value-end="90"></mdc-expressive-slider>
<mdc-expressive-slider type="range" value-start="0" value-end="50"></mdc-expressive-slider>
<mdc-expressive-slider type="range" value-start="50" value-end="100"></mdc-expressive-slider>
<mdc-expressive-slider type="range" value-start="0" value-end="100"></mdc-expressive-slider>

Reversed

Code

<div>
    <mdc-expressive-slider value="25"></mdc-expressive-slider>
    <mdc-expressive-slider reversed value="25"></mdc-expressive-slider>
    <mdc-expressive-slider reversed value="0"></mdc-expressive-slider>
    <mdc-expressive-slider reversed value="50"></mdc-expressive-slider>
    <mdc-expressive-slider reversed value="75"></mdc-expressive-slider>
    <mdc-expressive-slider reversed value="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider reversed type="centered" value="0"></mdc-expressive-slider>
    <mdc-expressive-slider reversed type="centered" value="25"></mdc-expressive-slider>
    <mdc-expressive-slider reversed type="centered" value="50"></mdc-expressive-slider>
    <mdc-expressive-slider reversed type="centered" value="-25"></mdc-expressive-slider>
    <mdc-expressive-slider reversed type="centered" value="-50"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider reversed type="range" value-start="0" value-end="50"></mdc-expressive-slider>
    <mdc-expressive-slider reversed type="range" value-start="20" value-end="80"></mdc-expressive-slider>
    <mdc-expressive-slider reversed type="range" value-start="50" value-end="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider reversed labeled value="75"></mdc-expressive-slider>
    <mdc-expressive-slider reversed labeled type="range" value-start="20" value-end="80"></mdc-expressive-slider>
    <mdc-expressive-slider reversed ticks step="10" value="50"></mdc-expressive-slider>
    <mdc-expressive-slider reversed disabled value="50"></mdc-expressive-slider>
</div>

Size

Code

<mdc-expressive-slider size="extra-small" value="50"></mdc-expressive-slider>
<mdc-expressive-slider size="small" value="50"></mdc-expressive-slider>
<mdc-expressive-slider size="medium" value="50"></mdc-expressive-slider>
<mdc-expressive-slider size="large" value="50"></mdc-expressive-slider>
<mdc-expressive-slider size="extra-large" value="50"></mdc-expressive-slider>

Step

Code

<mdc-expressive-slider step="10" value="50"></mdc-expressive-slider>
<mdc-expressive-slider step="25" value="50"></mdc-expressive-slider>
<mdc-expressive-slider step="1" min="0" max="10" value="5"></mdc-expressive-slider>

Tick Alignment

Code

<mdc-expressive-slider value="0" ticks step="10" size="medium"></mdc-expressive-slider>
<mdc-expressive-slider value="100" ticks step="10" size="medium"></mdc-expressive-slider>

Ticks

Code

<mdc-expressive-slider ticks step="10" value="50"></mdc-expressive-slider>
<mdc-expressive-slider ticks step="25" value="50"></mdc-expressive-slider>
<mdc-expressive-slider ticks labeled step="10" value="50"></mdc-expressive-slider>

Type

Code

<mdc-expressive-slider type="standard" value="50"></mdc-expressive-slider>
<mdc-expressive-slider type="centered" value="50"></mdc-expressive-slider>
<mdc-expressive-slider type="centered" value="-30"></mdc-expressive-slider>
<mdc-expressive-slider type="range" value-start="25" value-end="75"></mdc-expressive-slider>
<mdc-expressive-slider type="range" value-start="10" value-end="60"></mdc-expressive-slider>

Value

Code

<div>
    <mdc-expressive-slider value="0"></mdc-expressive-slider>
    <mdc-expressive-slider value="25"></mdc-expressive-slider>
    <mdc-expressive-slider value="50"></mdc-expressive-slider>
    <mdc-expressive-slider value="75"></mdc-expressive-slider>
    <mdc-expressive-slider value="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider type="centered" value="0"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="25"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="50"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="75"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider type="centered" value="0"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="-25"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="-50"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="-75"></mdc-expressive-slider>
    <mdc-expressive-slider type="centered" value="-100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider type="range" value-start="0" value-end="0"></mdc-expressive-slider>
    <mdc-expressive-slider type="range" value-start="0" value-end="50"></mdc-expressive-slider>
    <mdc-expressive-slider type="range" value-start="0" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider type="range" value-start="20" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider type="range" value-start="50" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider type="range" value-start="100" value-end="100"></mdc-expressive-slider>
</div>

Vertical Disabled

Code

<div>
    <mdc-expressive-slider direction="vertical" disabled value="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled value="25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled value="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled value="75"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled value="100"></mdc-expressive-slider>
</div>

<div>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="0"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="25"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="75"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="100"></mdc-expressive-slider>
</div>

<div>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="0"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="-25"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="-50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="-75"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled type="centered" value="-100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider direction="vertical" disabled type="range" value-start="0" value-end="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled type="range" value-start="0" value-end="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled type="range" value-start="0" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled type="range" value-start="20" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled type="range" value-start="50" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" disabled type="range" value-start="100" value-end="100"></mdc-expressive-slider>
</div>

<mdc-expressive-slider direction="vertical" disabled labeled value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" disabled labeled type="range" value-start="20" value-end="80"></mdc-expressive-slider>

Vertical Labeled

Code

<mdc-expressive-slider direction="vertical" labeled value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" labeled type="centered" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" labeled type="centered" value="-30"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" labeled type="range" value-start="20" value-end="80"></mdc-expressive-slider>

Vertical Range

Code

<mdc-expressive-slider direction="vertical" type="range" value-start="20" value-end="80"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="range" value-start="10" value-end="30"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="range" value-start="70" value-end="90"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="range" value-start="0" value-end="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="range" value-start="50" value-end="100"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="range" value-start="0" value-end="100"></mdc-expressive-slider>

Vertical Reversed

Code

<div>
    <mdc-expressive-slider direction="vertical" value="25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed value="25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed value="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed value="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed value="75"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed value="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider direction="vertical" reversed type="centered" value="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed type="centered" value="25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed type="centered" value="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed type="centered" value="-25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed type="centered" value="-50"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider direction="vertical" reversed type="range" value-start="0" value-end="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed type="range" value-start="20" value-end="80"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed type="range" value-start="50" value-end="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider direction="vertical" reversed labeled value="75"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed labeled type="range" value-start="20" value-end="80"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed ticks step="10" value="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" reversed disabled value="50"></mdc-expressive-slider>
</div>

Vertical Size

Code

<mdc-expressive-slider direction="vertical" size="extra-small" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" size="small" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" size="medium" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" size="large" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" size="extra-large" value="50"></mdc-expressive-slider>

Vertical Step

Code

<mdc-expressive-slider direction="vertical" step="10" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" step="25" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" step="1" min="0" max="10" value="5"></mdc-expressive-slider>

Vertical Ticks

Code

<mdc-expressive-slider direction="vertical" ticks step="10" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" ticks step="25" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" ticks labeled step="10" value="50"></mdc-expressive-slider>

Vertical Type

Code

<mdc-expressive-slider direction="vertical" type="standard" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="centered" value="50"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="centered" value="-30"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="range" value-start="25" value-end="75"></mdc-expressive-slider>
<mdc-expressive-slider direction="vertical" type="range" value-start="10" value-end="60"></mdc-expressive-slider>

Vertical Value

Code

<div>
    <mdc-expressive-slider direction="vertical" value="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" value="25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" value="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" value="75"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" value="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider direction="vertical" type="centered" value="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="75"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider direction="vertical" type="centered" value="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="-25"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="-50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="-75"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="centered" value="-100"></mdc-expressive-slider>
</div>

<div>
    <mdc-expressive-slider direction="vertical" type="range" value-start="0" value-end="0"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="range" value-start="0" value-end="50"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="range" value-start="0" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="range" value-start="20" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="range" value-start="50" value-end="100"></mdc-expressive-slider>
    <mdc-expressive-slider direction="vertical" type="range" value-start="100" value-end="100"></mdc-expressive-slider>
</div>