Range controls

  1. Forms
  2. Form Elements
  3. Range controls

Milestone progress

Standard, bounded, stepped and unavailable states. 

<input type="range" class="form-range">
<input type="range" class="form-range" min="0" max="5">
<input type="range" class="form-range" min="0" max="5" step="0.5">
<input type="range" class="form-range" disabled>

Budget and team allocation

Single-value and interval controls for planning limits.

$0 – $100k
Fit handles
Single value
Square handle 
<div id="slider"></div>
<div id="slider-fit"></div>
<div id="slider-round"></div>
<div id="slider-square"></div>
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/js/nouislider.js"></script>

Thresholds and scale markers

Show allowed bounds, labeled steps and non-linear scales. 

<div id="slider-pips"></div>
<div id="soft"></div>
<div id="nonlinear"></div>
<span id="lower-value"></span>
<span id="upper-value"></span>

Compare and lock ranges

Compare two values, keep their distance, or combine nearby tooltips. 

<div id="slider1"></div>
<span id="slider1-span"></span>
<div id="slider2"></div>
<span id="slider2-span"></span>
<button id="lockbutton" type="button">Lock ranges</button>
<div id="merging-tooltips"></div>
<div id="slider-hide"></div>

Color mixer and segmented scale

Three channel sliders, a live swatch and colored range segments.

Red
Green
Blue
PrimarySecondaryWarningInfoSuccessDanger 
<div class="sliders" id="color1"></div>
<div class="sliders" id="color2"></div>
<div class="sliders" id="color3"></div>
<div id="result"></div>
<div id="color-slider"></div>
<div id="primary-colored-slider"></div>
<div id="secondary-colored-slider"></div>
<div id="warning-colored-slider"></div>
<div id="info-colored-slider"></div>
<div id="success-colored-slider"></div>
<div id="danger-colored-slider"></div>

Vertical mode switch

A compact slider toggle for on/off settings.

Maintenance mode

Slide to change the current mode.

This is a visual control example powered by noUiSlider. 
<div id="slider-toggle"></div>
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/js/nouislider.js"></script>