Find me on GitHub
Breadcrumbs Button Buttongroup Caption Checkbox Datepicker Definition-list Expandable Footer Icons Infochip Inputfield List Loading Media Navbar Pagination Progressbar Progresscircle Radiobutton Select Sidebar Slider Subnav Switch Table Table-expandable Tabs Tag Textarea Tile

Slider

In groundhog since v0.1.1

Examples


<label for="i0" class="label">Slider</label>
<input class="slider" type="range" min="0" max="100" value="50" tabindex="0" id="i0">

    

<label for="i1" class="label">Slider</label>
<input disabled class="slider" type="range" min="0" max="100" value="50" id="i1">

Introduction

The Groundhog slider component visually enhances the standard html <input type="range"> element. The tile usually holds text and an icon representing an action.

Including a slider

  1. To include a Groundhog slider add a <input type="range"> and a <label> element. Include the necessary text content.

    <label>Label</label>
<input type="range">

  2. Add the necessary Groundhog classes, ids and type to the elements.

    <label for="i0" class="label">Label</label>
<input class="slider" id="i0" type="range">

  3. Add min, max and default values (optional)

    <label for="i0" class="label">Label</label>
<input class="slider" id="i0" type="range" min="0" max="100" value="50">