Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Range

A simple range.


Structure

<input type="range" class="zust-range" max="200" value="50">


Fullwidth

Make it fullwidth by adding class zust-fullwidth.

<input type="range" class="zust-range zust-fullwidth" max="200" value="50">


Colors

This includes all theme colors. Use any of them.

<input class="zust-range zust-fullwidth" type="range" max="200" value="105">
<input class="zust-range zust-fullwidth zust-success" type="range" max="200" value="98">
<input class="zust-range zust-fullwidth zust-warning" type="range" max="200" value="105">
<input class="zust-range zust-fullwidth zust-error" type="range" max="200" value="98">
<input class="zust-range zust-fullwidth zust-link" type="range" max="200" value="105">


Rounded

There is also rounded range. Use it by adding class zust-rounded.

<input class="zust-range zust-fullwidth zust-rounded" type="range" max="200" value="105">


Disabled

You can disable a slider by adding attribute disabled.

<input class="zust-range zust-fullwidth" disabled type="range" max="200" value="105">

checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs

Zusty Pages are Now Available offline.
New or Updated content available.  Refreshing...

Choose Editor