---
layout: docs
title: Range Sizes
description: null
---

## Example

<form>
  <input class="range-xxl" type="range" min="0" max="100" />
  <input class="range-xl" type="range" min="0" max="100" />
  <input class="range-l" type="range" min="0" max="100" />
  <input type="range" min="0" max="100" />
  <input class="range-s" type="range" min="0" max="100" />
  <input class="range-xs" type="range" min="0" max="100" />
  <input class="range-xxs" type="range" min="0" max="100" />
</form>

### HTML

```html
<input class="range-xxl" type="range" />
<input class="range-xl" type="range" />
<input class="range-l" type="range" />
<input type="range" />
<input class="range-s" type="range" />
<input class="range-xs" type="range" />
<input class="range-xxs" type="range" />
```

### CSS

```scss
--range-xxl-height: 1rem;
--range-xl-height: 0.875rem;
--range-l-height: 0.75rem;
--range-s-height: 0.5rem;
--range-xs-height: 0.375rem;
--range-xxs-height: 0.25rem;
```