Slider

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">