Theme:

Range

Range sliders let users select a value within a numeric range. They support color variants for the thumb and multiple sizes.

Color Variants

<input type="range" class="dui-range dui-range-primary" min="0" max="100" value="40" /> <input type="range" class="dui-range dui-range-secondary" min="0" max="100" value="60" />

Sizes

<input type="range" class="dui-range dui-range-primary dui-range-xs" min="0" max="100" /> <input type="range" class="dui-range dui-range-primary" min="0" max="100" /> <input type="range" class="dui-range dui-range-primary dui-range-lg" min="0" max="100" />