Slider

Usage

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Slider component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/range.css";
@import "@a3s-lab/ui/styles/a3s.css";

Slider uses the Range component CSS.

Using CDN or bundler imports? See the Installation page.

Copy or serve the full A3S UI JavaScript bundle.

<script src="/assets/js/all.min.js" defer></script>

Or copy or serve the A3S UI runtime and Slider script.

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/range.min.js" defer></script>

Using CDN or bundler imports? See the Installation page.

Use a native <input type="range" class="input">. Include range.js so A3S UI can keep the filled track in sync with the input value.

<input type="range" class="input w-full" aria-label="Volume" min="0" max="100" value="50" />

<input type="range" class="input">: Native range input styled as a slider. Width utilities such as w-full can be added directly.

A3S UI intentionally uses the native range input. Unlike shadcn/ui's Base UI slider, it does not support multiple thumbs or vertical orientation.