Slider

Demo

Disabled

Code

<mdc-slider disabled></mdc-slider>
<mdc-slider disabled labeled></mdc-slider>
<mdc-slider disabled step="10" ticks></mdc-slider>
<mdc-slider disabled ranged step="10" value-start="20" value-end="80"></mdc-slider>

Form

Code

<form id="qoeiuwhbf">
    <mdc-slider name="age" min="18" max="35" default-value="18" value="18" step="1" labeled ticks></mdc-slider>
    <mdc-slider name="weight" min="20" max="200" step="10" labeled ticks></mdc-slider>
    <mdc-slider name="speed" min="1" max="5" step="1" labeled ranged default-value-start="1" default-value-end="2"></mdc-slider>

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>

Labeled

Code

<mdc-slider></mdc-slider>
<mdc-slider labeled></mdc-slider>

Name

Code

<mdc-slider name="Value-1"></mdc-slider>
<mdc-slider name-start="Value-2" ranged></mdc-slider>
<mdc-slider name-start="StartValue" name-end="EndValue" ranged></mdc-slider>

Ranged

Code

<mdc-slider step="10" ranged labeled></mdc-slider>
<mdc-slider step="10" value-start="10" value-end="90" ranged ticks labeled></mdc-slider>
<mdc-slider step="10" labeled ranged value-start="80" value-end="100" default-value-start="10" default-value-end="30"></mdc-slider>

Step

Code

<mdc-slider step="1" ticks></mdc-slider>
<mdc-slider step="10" ticks></mdc-slider>
<mdc-slider step="20" ticks></mdc-slider>
<mdc-slider step="50" ticks></mdc-slider>

Ticks

Code

<mdc-slider step="10"></mdc-slider>
<mdc-slider step="10" ticks></mdc-slider>

Value Label

Code

<mdc-slider labeled value-label="Custom label"></mdc-slider>
<mdc-slider labeled value="40" value-label="Forty"></mdc-slider>
<mdc-slider labeled ranged value-start="25" value-end="75" value-label-start="Start" value-label-end="End"></mdc-slider>