Ranges

Setup

Range styles are included in Manifest CSS or a standalone stylesheet, both referencing theme variables.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.range.css" />

Default

<input type="range" min="0" max="100" value="50" />

Utilities

Ranges accept Manifest utility classes, which can be stacked in any combination.

Colors

<!-- Brand variant -->
<input type="range" class="brand" min="0" max="100" value="50" />

<!-- Accent variant -->
<input type="range" class="accent" min="0" max="100" value="50" />

<!-- Positive variant -->
<input type="range" class="positive" min="0" max="100" value="50" />

<!-- Negative variant -->
<input type="range" class="negative" min="0" max="100" value="50" />

Size

<!-- Small variant -->
<input type="range" class="sm" min="0" max="100" value="50" />

<!-- Large variant -->
<input type="range" class="lg" min="0" max="100" value="50" />

Markers

Use a <datalist> element to add tick marks with option labels to your range input.

12345678910

<label>
    <input type="range" min="0" max="100" step="25" value="50" list="volume-ticks" />
    <datalist id="volume-ticks">
        <option value="0" label="0"></option>
        <option value="25" label="25"></option>
        <option value="50" label="50"></option>
        <option value="75" label="75"></option>
        <option value="100" label="100"></option>
    </datalist>
</label>

Labels

Placing the range and text inside a <label> automatically stacks them with spacing.

<label>
    Volume
    <input type="range" min="0" max="100" value="50" />
</label>

To horizontally inline the label text with the range, place the text in a <data> element. This is used as a CSS hook with no semantic impact.

<label>
    <data>Volume</data>
    <input type="range" min="0" max="100" value="50" />
</label>

Styles

Theme

Default ranges use the following theme variables:

Variable	Purpose
`--color-field-surface`	Track background color
`--color-field-surface-hover`	Track hover background color
`--color-field-inverse`	Thumb color
`--spacing-field-height`	Thumb size
`--spacing`	Track height
`--radius`	Border radius for track corners
`--transition`	Transition for interactive states

Customization

Modify base range styles with custom CSS for the input[type=range] selector.

input[type=range] {
    --color-field-surface: #f0f8ff;
    --color-field-surface-hover: #dbeafe;

    &::-webkit-slider-thumb {
        background-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
}