Range

range

Range slider is used to select a value by sliding a handle

range docs

Class names

• component: range
• color: range-neutral, range-primary, range-secondary, range-accent, range-success, range-warning, range-info, range-error
• size: range-xs, range-sm, range-md, range-lg, range-xl
• direction: range-vertical (vertical slider)

Syntax

<input type="range" min="0" max="100" value="40" class="range {MODIFIER}" />

Rules

• {MODIFIER} is optional and can have one of each color/size class names
• For a vertical slider use range-vertical
• You must specify min and max attributes