---
layout: '@/layouts/Doc.astro'
title: Range
---

import Example from '@/components/Example.astro'
import rangeStyle from '@webtui/css/components/range.css?raw'
import boxStyle from '@webtui/css/utils/box.css?raw'

A range slider input

<Example
    stylesheets={[rangeStyle]}
    html={`<input type="range" min="0" max="100" value="50" />`}
/>

## Import

```css
@import '@webtui/css/components/range.css';
```

## Usage

```html
<input type="range" />
```

## Examples

### Basic Range

<Example
    stylesheets={[rangeStyle]}
    css={`
        body {
            display: flex;
            flex-direction: column;
            gap: 1lh;
        }
    `}
    html={`
<input type="range" min="0" max="100" value="25" />
<input type="range" min="0" max="100" value="50" />
<input type="range" min="0" max="100" value="75" />
`}
/>

### Track Styles

<Example
    stylesheets={[rangeStyle]}
    css={`
        body {
            display: flex;
            flex-direction: column;
            gap: 1lh;
        }
    `}
    html={`
<input type="range" min="0" max="100" value="40" />
<input type="range" bar-="thick" min="0" max="100" value="50" />
<input type="range" bar-="line" min="0" max="100" value="60" />
`}
/>

### With Labels

<Example
    stylesheets={[rangeStyle]}
    css={`
        body {
            display: flex;
            flex-direction: column;
            gap: 1lh;
        }
    `}
    html={`
<label>
    Volume
    <input type="range" min="0" max="100" value="25" />
</label>
<label>
    Brightness
    <input type="range" min="0" max="100" value="75" />
</label>
<label>
    Warmth
    <input type="range" min="0" max="100" value="50" disabled />
</label>
`}
/>

### Disabled State

<Example
    stylesheets={[
        rangeStyle,
    ]}
    css={`
body {
    display: flex;
    flex-direction: column;
    gap: 1lh;
}`}
    html={`
<label>
    Enabled
    <input type="range" min="0" max="100" value="50" />
</label>

<label>
    Disabled
    <input type="range" min="0" max="100" value="30" disabled />
</label>
`} />

## Reference

### Properties

Use CSS custom properties to customize the range appearance

- `--range-track-color`: Color of the slider track
- `--range-thumb-color`: Default color of the slider thumb
- `--range-thumb-color-focus`: Color of the slider thumb when focused or active
- `--range-track-height`: Height of the track

```css
#my-range {
    --range-track-color: var(--background2);
    --range-thumb-color: var(--foreground2);
    --range-thumb-color-focus: var(--foreground0);
}
```

### Extending

To extend the Range stylesheet, define a CSS rule on the `components` layer

```css
@layer components {
    input[type='range'] {
        &[variant-='accent'] {
            --range-track-color: var(--accent-color);
            --range-thumb-color: var(--accent-foreground);
        }

        /* ... */
    }
}
```

### Scope

- All `<input type="range">` elements

```css
input[type='range'] {
    /* ... */
}
```