Slider

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

Usage

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return <Slider label="Volume" defaultValue={40} step={5} showValue />;
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

<html data-theme="graphite" data-mode="light">

HTML

Without React, write this markup and load @mlola-ui/behavior once. It runs the keyboard, focus and state for every element marked data-ml="slider", including markup added later, and needs no build step.

<div class="ml-slider-field" data-ml="slider" data-size="md" data-ml-step="5">
  <div class="ml-slider-header">
    <span class="ml-slider-label" id="bright-label">Brightness</span>
    <span class="ml-slider-output">40</span>
  </div>
  <div class="ml-slider">
    <div class="ml-slider-track">
      <span class="ml-slider-range" style="width: 40%"></span>
      <span class="ml-slider-thumb" id="bright-thumb" role="slider" tabindex="0"
            aria-labelledby="bright-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"
            style="left: 40%"></span>
    </div>
  </div>
</div>

<script type="module">
  import { observe } from "@mlola-ui/behavior";
  observe();
</script>

Options

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Accessibility and theming

• Semantic elements, accessible names and state relationships are part of the contract.
• Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
• Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
• Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

• input
• @mlola-ui/behavior