Slider

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Select Submit Button →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add forms/slider

Plain-CSS theme — no build step

npx astrocraft-ui add forms/slider --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add forms/slider --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/slider --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/slider --theme tailwind --bridge lumos

Slider

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`Slider.astro`	`slider`	`data-size`: `sm` · `md`	—	—

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.

src/components/ui/forms/slider/Slider.astro

---
// src/components/ui/forms/slider/Slider.astro — headless primitive (see ../../README.md).
// Native <input type="range">. Zero-JS. Pass native min/max/step/value/disabled through; give it a
// name via `id`/`name` and a label via `aria-label` or an associated Label.
//
// Unstyled, this is the UA's own range control — fully operable, which is the point. structure.css
// deliberately ships NO slider rules: `appearance: none` on a range input erases the native track and
// thumb in WebKit, so shipping it without also shipping geometry would leave an invisible slider in a
// consumer who styles nothing. Restyling a range is therefore all-or-nothing — `appearance: none`
// plus `::-webkit-slider-runnable-track` / `::-webkit-slider-thumb` (which needs its own
// `appearance: none`) / `::-moz-range-track` / `::-moz-range-thumb`, together. See the worked example
// in `src/styles/theme-default.css`; those four vendor pseudo-elements are why it is worth reading
// before you write your own.
//
// ponytail: no filled portion in WebKit/Blink without JS (there is no `::-webkit-*-progress`; Firefox
// has `::-moz-range-progress`). For a fill on every browser, mirror `value` into a custom property
// from a small script and paint the track with a gradient — kept out here to stay zero-JS.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"input"> & { size?: "sm" | "md" };

const { size = "md", class: className, ...rest } = Astro.props;
---

<input type="range" class={className} data-slot="slider" data-size={size} {...rest} />

src/components/ui/forms/slider/index.ts

import Slider from "./Slider.astro";

export { Slider };
export default Slider;

What you get

The component source, copied into your project by npx astrocraft-ui add forms/slider — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.

Install

Live demo

Slider

Attribute surface

Source

What you get