Range

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so Range is styled but inert: its behavior comes from slider. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class range, with 12 modifiers:

• .range
• .range-accent
• .range-control
• .range-error
• .range-indicator
• .range-info
• .range-neutral
• .range-primary
• .range-secondary
• .range-success
• .range-thumb
• .range-track
• .range-warning

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Range } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { useState } from "react";
import { Range } from "@wizeworks/silicaui-react";
import { Section, LabeledRow } from "../lib/Section";
import { COLORS } from "../lib/data";

export function RangeDemo() {
    const [volume, setVolume] = useState(40);
    const [priceRange, setPriceRange] = useState<number[]>([20, 70]);

    return (
        <>
            <Section title="Colors">
                <div className="flex max-w-md flex-col gap-4">
                    {COLORS.slice(0, 6).map((color) => (
                        <Range key={color} color={color} defaultValue={55} />
                    ))}
                </div>
            </Section>

            <Section title="Real use · volume + price range">
                <div className="flex max-w-md flex-col gap-5">
                    <LabeledRow label={`Volume · ${volume}%`}>
                        <Range
                            color="brand"
                            value={volume}
                            onValueChange={(v) => setVolume(v as number)}
                        />
                    </LabeledRow>
                    <LabeledRow label={`Price range · $${priceRange[0]} – $${priceRange[1]}`}>
                        <Range
                            color="success"
                            value={priceRange}
                            onValueChange={(v) => setPriceRange(v as number[])}
                        />
                    </LabeledRow>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

slider — Range (compact) and Slider (rich, showValue) are both single self-contained components; see sliderExpand. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Range", "range", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "range range-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

slider

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.