Slider
Usage notes
Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
Default
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label1" class="coral-FieldLabel">Label</label>
<coral-slider labelledby="label1" style="width:200px"></coral-slider>
</form>
Filled
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label2" class="coral-FieldLabel">Label</label>
<coral-slider labelledby="label2" style="width:200px" filled="" value="14" min="10" max="20" step="2"></coral-slider>
</form>
With Label + Value
Toggle markup
<coral-slider labelledby="label3" style="width:200px" showvalue="" value="14" min="10" max="20" step="2">
<coral-slider-content id="label3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</coral-slider-content>
</coral-slider>
Ranged Slider
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label4" class="coral-FieldLabel">Label</label>
<coral-rangedslider labelledby="label4" style="width:200px" showvalue="" startvalue="12" endvalue="18" min="10" max="20" step="2"></coral-rangedslider>
</form>
Disabled
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label5" class="coral-FieldLabel">Label</label>
<coral-slider labelledby="label5" style="width:200px" filled="" disabled="" value="14" min="10" max="20" step="2"></coral-slider>
</form>
With custom values
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label6" class="coral-FieldLabel">Label</label>
<coral-slider labelledby="label6" style="width:200px" showvalue="" value="2" min="1" max="5" step="1">
<coral-slider-item value="1">First</coral-slider-item>
<coral-slider-item value="2">Second</coral-slider-item>
<coral-slider-item value="3">Third</coral-slider-item>
<coral-slider-item value="4">Fourth</coral-slider-item>
<coral-slider-item value="5">Fifth</coral-slider-item>
</coral-slider>
</form>
Form Field
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:200px;">
<label id="label7" class="coral-FieldLabel">Label</label>
<coral-slider class="coral-Form-field" labelledby="label7"></coral-slider>
</form>