### Progress Bar Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Demonstrates various Mielo UI progress bar configurations, including basic, no-label, multi-segment, and transparent segments. These examples showcase how to visually represent progress and loading states.

```html
<div class="mie progress">
  <div class="progressbar" style="width: 60%;">
    <span class="label visible">60%</span>
  </div>
</div>

<div class="mie progress">
  <div class="progressbar" style="width: 40%;"></div>
</div>

<div class="mie progress">
  <div class="progressbar" style="width: 30%;">
    <span class="label visible">30%</span>
  </div>
  <div class="progressbar" style="width: 20%;">
    <span class="label visible">20%</span>
  </div>
</div>

<div class="mie progress">
  <div class="progressbar" style="width: 50%;"></div>
  <div class="progressbar transparent" style="width: 20%;"></div>
</div>
```

--------------------------------

### Modal Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Illustrates the Modal component, designed for overlay dialogs with animations. It includes examples for the modal overlay (backdrop) and the modal container itself, along with variations for animation states.

```html
<!-- Modal overlay (backdrop) -->
<div class="mie modal-overlay"></div>

<!-- Modal container -->
<div class="mie modal">
  <div class="window">
    <div class="mie dialog">
      <div class="content">
        <div class="mie header center">
          <div class="heading">
            <h2 class="title">Confirm Action</h2>
            <span class="subtitle">Are you sure you want to proceed?</span>
          </div>
        </div>
      </div>
      <div class="mie buttons actions">
        <button class="mie button">Cancel</button>
        <button class="mie button">Confirm</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal with animation classes (for CSS transitions) -->
<div class="mie modal modal-enter-active">
  <div class="window">
    <!-- Dialog content -->
  </div>
</div>
```

--------------------------------

### Mielo UI Entry Component Examples

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

HTML examples for the Mielo UI Entry component, demonstrating various styles including floating labels, different input types, and appearance modifiers like fluid, bordered, and transparent.

```html
<!-- Basic text entry with floating label -->
<div class="mie entry">
  <div class="field">
    <input type="text" id="username" />
    <label for="username">Username</label>
  </div>
</div>

<!-- Password entry -->
<div class="mie entry">
  <div class="field">
    <input type="password" id="password" />
    <label for="password">Password</label>
  </div>
</div>

<!-- Full-width entry -->
<div class="mie entry fluid">
  <div class="field">
    <input type="text" id="email" />
    <label for="email">Email Address</label>
  </div>
</div>

<!-- Bordered entry -->
<div class="mie entry bordered">
  <div class="field">
    <input type="text" id="search" />
    <label for="search">Search</label>
  </div>
</div>

<!-- Disabled entry -->
<div class="mie entry disabled">
  <div class="field">
    <input type="text" id="readonly" disabled />
    <label for="readonly">Read Only</label>
  </div>
</div>

<!-- Transparent background entry -->
<div class="mie entry transparent">
  <div class="field">
    <input type="text" id="subtle" />
    <label for="subtle">Subtle Input</label>
  </div>
</div>
```

--------------------------------

### Header Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Illustrates the Mielo UI Header component, showing basic title/subtitle combinations, integration with icons, centered alignment, inverted styles, and flattened layouts. These examples are useful for creating consistent page titles and navigation headers.

```html
<div class="mie header">
  <div class="heading">
    <h2 class="title">Page Title</h2>
    <span class="subtitle">Supporting description text</span>
  </div>
</div>

<div class="mie header">
  <span class="mie icon">
    <svg><!-- Icon SVG --></svg>
  </span>
  <div class="heading">
    <h2 class="title">Settings</h2>
    <span class="subtitle">Configure your preferences</span>
  </div>
</div>

<div class="mie header center">
  <div class="heading">
    <h2 class="title">Welcome</h2>
    <span class="subtitle">Get started with Mielo UI</span>
  </div>
</div>

<div class="mie header inverted">
  <div class="heading">
    <h2 class="title">Category</h2>
    <span class="subtitle">Main Heading</span>
  </div>
</div>

<div class="mie header flattened">
  <div class="heading">
    <h2 class="title">Compact Header</h2>
  </div>
</div>
```

--------------------------------

### Sidebar Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Demonstrates the Sidebar component, offering collapsible side navigation with different animation styles: width-based, shift-based, and overlap. Examples show how to structure the sidebar and its content for each animation type.

```html
<!-- Width-based sidebar (default) -->
<div class="mie sidebar width opened">
  <div class="content">
    <div class="mie list">
      <div class="mie item">
        <div class="content">
          <span class="title">Dashboard</span>
        </div>
      </div>
      <div class="mie item">
        <div class="content">
          <span class="title">Settings</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Shift sidebar (pushes content) -->
<div class="mie sidebar shift opened">
  <div class="content">
    <!-- Navigation items -->
  </div>
</div>
<div class="container">
  <!-- Main content -->
</div>

<!-- Overlap sidebar (floats over content) -->
<div class="mie sidebar overlap opened">
  <div class="content">
    <!-- Navigation items -->
  </div>
</div>
<div class="container">
  <!-- Main content -->
</div>
```

--------------------------------

### Mielo UI Checkbox Component Examples

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

HTML examples for the Mielo UI Checkbox component, illustrating basic and circular styles with integrated labels and customizable indicators.

```html
<!-- Basic checkbox -->
<label class="mie checkbox">
  <input type="checkbox" class="input" />
  <span class="label">
    <span class="indicator">
      <span class="icon">
        <svg viewBox="0 0 16 16" fill="currentColor">
          <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
        </svg>
      </span>
    </span>
    <span class="content">Accept Terms</span>
  </span>
</label>

<!-- Circular checkbox -->
<label class="mie checkbox circular">
  <input type="checkbox" class="input" />
  <span class="label">
    <span class="indicator">
      <span class="icon">
        <svg viewBox="0 0 16 16" fill="currentColor">
          <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
        </svg>
      </span>
    </span>
    <span class="content">Remember me</span>
  </span>
</label>
```

--------------------------------

### Install Mielo UI via Yarn

Source: https://github.com/mielo-ui/mielo.css/blob/main/README.md

Installs the Mielo UI framework using the Yarn package manager. This command achieves the same result as the NPM installation, providing Mielo UI for your project.

```sh
yarn add @mielo-ui/mielo
```

--------------------------------

### Window Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Showcases the Mielo UI Window component, designed to mimic desktop application windows. Examples include a basic window with a header bar and content area, and a transparent window variant. These are useful for creating distinct UI sections or modal-like interfaces.

```html
<div class="mie window">
  <div class="mie headerbar">
    <div class="left">
      <button class="mie button">Back</button>
    </div>
    <div class="center">
      <div class="mie header">
        <div class="heading">
          <h2 class="title">Application</h2>
        </div>
      </div>
    </div>
    <div class="right">
      <button class="mie button">Menu</button>
    </div>
  </div>
  <div class="mie view content">
    <!-- Window content goes here -->
  </div>
</div>

<div class="mie window transparent">
  <!-- Content -->
</div>
```

--------------------------------

### Install Mielo UI via npm or yarn

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Instructions for installing the Mielo UI library using package managers like npm or yarn. This is the first step to integrating Mielo UI into your project.

```bash
# Install via npm
npm install @mielo-ui/mielo

# Or install via yarn
yarn add @mielo-ui/mielo
```

--------------------------------

### Mielo UI Button Component Examples

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Examples of the Mielo UI Button component in HTML, showcasing basic usage, circular and pilled styles, and button group configurations.

```html
<!-- Basic button -->
<button class="mie button">Click Me</button>

<!-- Circular button (equal padding, round shape) -->
<button class="mie button circular">
  <span class="icon">+</span>
</button>

<!-- Pilled button (fully rounded ends) -->
<button class="mie button pilled">Rounded Button</button>

<!-- Button group -->
<div class="mie buttons">
  <button class="mie button">Left</button>
  <button class="mie button">Center</button>
  <button class="mie button">Right</button>
</div>

<!-- Relaxed button group (fluid, equal-width buttons) -->
<div class="mie buttons relaxed">
  <button class="mie button">Option A</button>
  <button class="mie button">Option B</button>
</div>
```

--------------------------------

### Tabs Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Presents the Tabs component, which provides styled tab buttons and containers for tabbed navigation. Examples cover basic tabs, transparent variations, tabs with icons, and individual transparent tabs.

```html
<!-- Basic tabs -->
<div class="mie tabs">
  <div class="mie tab active">General</div>
  <div class="mie tab">Advanced</div>
  <div class="mie tab">About</div>
</div>

<!-- Transparent tabs -->
<div class="mie tabs transparent">
  <div class="mie tab active">Tab 1</div>
  <div class="mie tab">Tab 2</div>
</div>

<!-- Tab with icon -->
<div class="mie tabs">
  <div class="mie tab active">
    <span class="adw icon">
      <svg><!-- Icon --></svg>
    </span>
    Home
  </div>
  <div class="mie tab">
    <span class="adw icon">
      <svg><!-- Icon --></svg>
    </span>
    Settings
  </div>
</div>

<!-- Transparent individual tab -->
<div class="mie tabs">
  <div class="mie tab active">Active</div>
  <div class="mie tab transparent">Transparent Tab</div>
</div>
```

--------------------------------

### Install Mielo UI via NPM

Source: https://github.com/mielo-ui/mielo.css/blob/main/README.md

Installs the Mielo UI framework using the Node Package Manager (NPM). This is the quickest way to add Mielo UI to your project for development.

```sh
npm install @mielo-ui/mielo
```

--------------------------------

### Item Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Provides examples of the Mielo UI Item component for creating list layouts. Covers basic items, items with side content (like toggles), vertical stacking, centered alignment, and inverted text styles. These are suitable for menus, settings lists, and notification displays.

```html
<div class="mie item">
  <div class="content">
    <span class="title">Item Title</span>
    <span class="description">Item description text</span>
  </div>
</div>

<div class="mie item">
  <div class="content">
    <span class="title">Notification Settings</span>
    <span class="description">Manage your alerts</span>
  </div>
  <div class="side">
    <label class="mie toggle">
      <input type="checkbox" class="input" checked />
      <span class="label">
        <span class="indicator"><span class="dot"></span></span>
      </span>
    </label>
  </div>
</div>

<div class="mie item vertical">
  <div class="content">
    <span class="title">Stacked Layout</span>
    <span class="description">Content stacks vertically</span>
  </div>
</div>

<div class="mie item center">
  <div class="content">
    <span class="title">Centered Content</span>
    <span class="description">Text is center-aligned</span>
  </div>
</div>

<div class="mie item">
  <div class="content inverted">
    <span class="title">Secondary text</span>
    <span class="description">Primary text</span>
  </div>
</div>
```

--------------------------------

### Dialog Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Shows the Dialog component, which provides styled dialog boxes suitable for use within modals. Examples include a basic dialog with content and action buttons, and a dialog variant attached to a modal.

```html
<!-- Basic dialog -->
<div class="mie dialog">
  <div class="content">
    <div class="mie header center">
      <div class="heading">
        <h2 class="title">Delete File?</h2>
        <span class="subtitle">This action cannot be undone.</span>
      </div>
    </div>
  </div>
  <div class="mie buttons actions">
    <button class="mie button">Cancel</button>
    <button class="mie button">Delete</button>
  </div>
</div>

<!-- Dialog attached to modal -->
<div class="mie dialog attached attached-modal">
  <div class="content">
    <!-- Content -->
  </div>
  <div class="mie buttons actions">
    <button class="mie button">OK</button>
  </div>
</div>
```

--------------------------------

### Mielo UI Image Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Demonstrates various ways to use the Mielo UI Image component, including basic styling, circular avatars, bordered images, and containers for transparent background images.

```html
<!-- Basic image -->
<div class="mie image" style="background-image: url('photo.jpg'); height: 100px;"></div>

<!-- Circular image (avatar) -->
<div class="mie image circular" style="background-image: url('avatar.jpg'); height: 48px;"></div>

<!-- Bordered image -->
<div class="mie image bordered" style="background-image: url('photo.jpg'); height: 150px;"></div>

<!-- Transparent background image container -->
<div class="mie image transparent" style="height: 100px;">
  <img src="logo.png" alt="Logo" />
</div>
```

--------------------------------

### HeaderBar Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Demonstrates the structure of the HeaderBar component, which offers macOS/GNOME-style title bars. It supports basic, bordered, and transparent variations, with left, center, and right content sections.

```html
<div class="mie headerbar">
  <div class="left">
    <button class="mie button">
      <span class="icon">
        <svg><!-- Back arrow --></svg>
      </span>
    </button>
  </div>
  <div class="center">
    <div class="mie header">
      <div class="heading">
        <h2 class="title">Document.txt</h2>
        <span class="subtitle">~/Documents</span>
      </div>
    </div>
  </div>
  <div class="right">
    <button class="mie button">Save</button>
  </div>
</div>

<div class="mie headerbar bordered">
  <div class="left"></div>
  <div class="center">
    <div class="mie header">
      <div class="heading">
        <h2 class="title">Settings</h2>
      </div>
    </div>
  </div>
  <div class="right"></div>
</div>

<div class="mie headerbar transparent">
  <!-- Content -->
</div>
```

--------------------------------

### List Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The List component provides a styled container for list items, ensuring proper spacing and layout. It's used to present collections of related information.

```html
<!-- Basic list -->
<div class="mie list">
  <div class="mie item">
    <div class="content">
      <span class="title">List Item 1</span>
    </div>
  </div>
  <div class="mie item">
    <div class="content">
      <span class="title">List Item 2</span>
    </div>
  </div>
  <div class="mie item">
    <div class="content">
      <span class="title">List Item 3</span>
    </div>
  </div>
</div>
```

--------------------------------

### View Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The View component creates content area containers with different background styles and modifiers. It supports basic, panel, windows, content, OSD, bordered, fluid, and scrollable variations.

```html
<!-- Basic view -->
<div class="mie view">
  <!-- Content -->
</div>

<!-- Panel-style view (sidebar background) -->
<div class="mie view panel">
  <!-- Panel content -->
</div>

<!-- Window-style view -->
<div class="mie view windows">
  <!-- Window content -->
</div>

<!-- Content-style view -->
<div class="mie view content">
  <!-- Main content area -->
</div>

<!-- OSD (on-screen display) style -->
<div class="mie view osd">
  <!-- Overlay content -->
</div>

<!-- Bordered view -->
<div class="mie view bordered">
  <!-- Content with border -->
</div>

<!-- Full-width fluid view -->
<div class="mie view fluid">
  <!-- Full-width content -->
</div>

<!-- Scrollable view -->
<div class="mie view scrollable" style="height: 300px;">
  <!-- Scrollable content -->
</div>
```

--------------------------------

### Build Mielo UI from Source

Source: https://github.com/mielo-ui/mielo.css/blob/main/README.md

Clones the Mielo UI repository, installs dependencies, formats code, and builds the CSS for the library. This is useful for development or contributing to the project.

```sh
git clone https://github.com/mielo-ui/mielo
cd mielo

npm install # or "yarn"
npm run fmt # format & linting styles
npm run build # build css & minify
```

--------------------------------

### Message Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Message component displays alert or notification boxes. It supports icons, titles, descriptions, and an optional close button for user interaction.

```html
<!-- Basic message -->
<div class="mie message">
  <div class="content">
    <span class="title">Information</span>
    <span class="description">This is an informational message.</span>
  </div>
</div>

<!-- Message with icon -->
<div class="mie message">
  <div class="icon">
    <span class="mie icon">
      <svg><!-- Info icon --></svg>
    </span>
  </div>
  <div class="content">
    <span class="title">Success</span>
    <span class="description">Your changes have been saved.</span>
  </div>
</div>

<!-- Message with close button -->
<div class="mie message">
  <div class="icon">
    <span class="mie icon">
      <svg><!-- Warning icon --></svg>
    </span>
  </div>
  <div class="content">
    <span class="title">Warning</span>
    <span class="description">Please review your settings.</span>
  </div>
  <button class="mie button close">
    <span class="mie icon">
      <svg><!-- Close icon --></svg>
    </span>
  </button>
</div>
```

--------------------------------

### Clamp Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Clamp component is a centered, width-constrained content container, ideal for readable layouts. It can optionally include a header section for titles and subtitles.

```html
<!-- Basic clamp container -->
<div class="mie clamp">
  <div class="content">
    <p>Content is constrained to a readable width and centered on the page.</p>
  </div>
</div>

<!-- Clamp with header -->
<div class="mie clamp">
  <div class="header">
    <div class="mie header">
      <div class="heading">
        <h1 class="title">Page Title</h1>
        <span class="subtitle">Page description</span>
      </div>
    </div>
  </div>
  <div class="content">
    <p>Main content area with constrained width.</p>
  </div>
</div>
```

--------------------------------

### Divider Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Divider component creates horizontal separator lines to visually divide content. It can be used standalone or within other components like lists.

```html
<!-- Basic divider -->
<div class="mie divider"></div>

<!-- Divider between content -->
<div class="mie list">
  <div class="mie item">
    <div class="content"><span class="title">Item 1</span></div>
  </div>
  <div class="mie divider"></div>
  <div class="mie item">
    <div class="content"><span class="title">Item 2</span></div>
  </div>
</div>
```

--------------------------------

### Rows Component Examples (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Rows component is designed for settings pages and configuration panels, offering a structured layout for rows of options. Each row can contain content and a side element, like a toggle switch.

```html
<!-- Rows container -->
<div class="mie rows">
  <div class="mie row">
    <div class="mie item">
      <div class="content">
        <span class="title">Enable Feature</span>
        <span class="description">Turn this feature on or off</span>
      </div>
      <div class="side">
        <label class="mie toggle">
          <input type="checkbox" class="input" />
          <span class="label">
            <span class="indicator"><span class="dot"></span></span>
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="mie row">
    <div class="mie item">
      <div class="content">
        <span class="title">Another Setting</span>
        <span class="description">Description of this setting</span>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Import Mielo UI CSS or SCSS

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

Demonstrates how to import the Mielo UI styles into your project. You can import the pre-compiled CSS or the SCSS source for further customization.

```scss
/* Import in your SCSS */
@import 'mielo/css/mielo.css';

/* Or import the SCSS source for customization */
@use '@mielo-ui/mielo/sass/mielo.scss';
```

--------------------------------

### Import Mielo UI CSS

Source: https://github.com/mielo-ui/mielo.css/blob/main/README.md

Imports the Mielo UI CSS file into your project. This ensures that all Mielo UI styles and components are applied to your web application.

```css
@import 'mielo/css/mielo.css'
```

--------------------------------

### Select Component: Custom Dropdown Menus (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Select component offers styled dropdown menus with a custom appearance matching the Mielo design language. It uses nested divs to structure the button and menu options.

```html
<!-- Basic select dropdown -->
<div class="mie select">
  <div class="content">
    <button class="base">
      <span class="value">Choose option</span>
      <span class="icon">
        <svg><!-- Dropdown arrow --></svg>
      </span>
    </button>
  </div>
  <div class="menu">
    <div class="options">
      <div class="option">Option 1</div>
      <div class="option">Option 2</div>
      <div class="option">Option 3</div>
    </div>
  </div>
</div>

<!-- Opened state -->
<div class="mie select opened">
  <div class="content">
    <button class="base">
      <span class="value">Selected Item</span>
    </button>
  </div>
  <div class="menu">
    <!-- Menu content -->
  </div>
</div>
```

--------------------------------

### Label Component: Styled Badges and Tags (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Label component provides styled badges and tags with support for floating positioning, circular shapes, borders, and accent colors. It's implemented using span elements with various Mielo classes.

```html
<!-- Basic label -->
<span class="mie label">New</span>

<!-- Circular label -->
<span class="mie label circular">5</span>

<!-- Bordered label -->
<span class="mie label bordered">Beta</span>

<!-- Transparent label -->
<span class="mie label transparent">Draft</span>

<!-- Floating labels (positioned relative to parent) -->
<div style="position: relative; display: inline-block;">
  <button class="mie button">Notifications</button>
  <!-- Top-right floating label -->
  <span class="mie label floating ftr circular">3</span>
</div>

<!-- Floating positions: ftl (top-left), ftr (top-right), fbl (bottom-left), fbr (bottom-right) -->
<div style="position: relative;">
  <span class="mie label floating ftl">Top Left</span>
  <span class="mie label floating ftr">Top Right</span>
  <span class="mie label floating fbl">Bottom Left</span>
  <span class="mie label floating fbr">Bottom Right</span>
</div>
```

--------------------------------

### Toggle Component: iOS-style Switch Toggles (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Toggle component provides iOS-style switch toggles with smooth animations and optional icon indicators. It uses standard HTML input elements and specific class names for styling.

```html
<!-- Basic toggle switch -->
<label class="mie toggle">
  <input type="checkbox" class="input" />
  <span class="label">
    <span class="indicator">
      <span class="dot"></span>
    </span>
    <span class="content">Enable Notifications</span>
  </span>
</label>

<!-- Toggle with icons in indicator -->
<label class="mie toggle">
  <input type="checkbox" class="input" />
  <span class="label">
    <span class="indicator">
      <span class="dot">
        <span class="icon">
          <svg><!-- Check icon --></svg>
        </span>
      </span>
      <span class="icon layout">
        <span class="checked">
          <svg><!-- On state icon --></svg>
        </span>
        <span class="unchecked">
          <svg><!-- Off state icon --></svg>
        </span>
      </span>
    </span>
    <span class="content">Dark Mode</span>
  </span>
</label>
```

--------------------------------

### Slider Component: Range Inputs (HTML)

Source: https://context7.com/mielo-ui/mielo.css/llms.txt

The Slider component provides styled range inputs supporting horizontal and vertical orientations, as well as range selection with two thumbs. It utilizes input type='range' and associated divs for visual styling.

```html
<!-- Basic horizontal slider -->
<div class="mie slider">
  <div class="range-slider">
    <div class="range-slider__range"></div>
    <div class="range-slider__thumb" tabindex="0"></div>
    <input type="range" min="0" max="100" value="50" />
  </div>
</div>

<!-- Vertical slider -->
<div class="mie slider vertical">
  <div class="range-slider" data-vertical>
    <div class="range-slider__range"></div>
    <div class="range-slider__thumb" tabindex="0"></div>
    <input type="range" min="0" max="100" value="50" />
  </div>
</div>

<!-- Range slider (two thumbs) -->
<div class="mie slider range">
  <div class="range-slider">
    <div class="range-slider__range"></div>
    <div class="range-slider__thumb" tabindex="0"></div>
    <div class="range-slider__thumb" tabindex="0"></div>
    <input type="range" min="0" max="100" value="25" />
    <input type="range" min="0" max="100" value="75" />
  </div>
</div>

<!-- Disabled slider -->
<div class="mie slider">
  <div class="range-slider" data-disabled>
    <div class="range-slider__range"></div>
    <div class="range-slider__thumb" data-disabled></div>
    <input type="range" disabled />
  </div>
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.