1. Docs
2. Forms
3. Range

Range 1.2.2

Use .velin-range for cross-browser styled range slider inputs with custom track and thumb. Deutsch: Schieberegler

When to use

• Numeric ranges where a slider is clearer than typing — style with VelinStyle range classes and a visible value/label.

When not

• Do not use a range alone when an exact typed value is required — offer an input or readable output.
• Do not omit an accessible name for the control.

Default range

<label class="velin-label" for="vol">Volume</label>
<input type="range" class="velin-range" id="vol">

Min, max, and step

Range inputs accept standard min, max, and step attributes.

<input type="range" class="velin-range" min="0" max="100" step="5" value="50">

Disabled

<input type="range" class="velin-range" disabled>