Docs

Slider

A rich range input (Base UI behavior). Pass a number for a single thumb, or a tuple for a two-thumb range selection; the number of thumbs follows the shape of value/defaultValue.

Colors

Sizes

Real use · brightness + a two-thumb range

Brightness · 65%
Budget · $25 – $75

Using Slider

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

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 Slider 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 slider, with 18 modifiers:

  • .slider
  • .slider-accent
  • .slider-control
  • .slider-error
  • .slider-indicator
  • .slider-info
  • .slider-lg
  • .slider-md
  • .slider-neutral
  • .slider-primary
  • .slider-secondary
  • .slider-sm
  • .slider-success
  • .slider-thumb
  • .slider-track
  • .slider-value
  • .slider-warning
  • .slider-xl
  • .slider-xs

React

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

npm i @wizeworks/silicaui-react
import { Slider } from "@wizeworks/silicaui-react";

Props

PropTypeRequiredDescription
colorSilicaColornoAccent for the filled track + thumb(s).
sizeSliderSizenoRail thickness + thumb diameter.
showValuebooleannoShow a live numeric readout beside the track.

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.

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

export function SliderDemo() {
    const [brightness, setBrightness] = useState(65);
    const [range, setRange] = useState<number[]>([25, 75]);

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

            <Section title="Sizes">
                <div className="flex max-w-md flex-col gap-5">
                    {(["sm", "md", "lg"] as const).map((size) => (
                        <Slider key={size} color="primary" size={size} defaultValue={55} />
                    ))}
                </div>
            </Section>

            <Section title="Real use · brightness + a two-thumb range">
                <div className="flex max-w-md flex-col gap-6">
                    <LabeledRow label={`Brightness · ${brightness}%`}>
                        <Slider
                            color="brand"
                            value={brightness}
                            onValueChange={(v) => setBrightness(v as number)}
                            showValue={false}
                        />
                    </LabeledRow>
                    <LabeledRow label={`Budget · $${range[0]} – $${range[1]}`}>
                        <Slider
                            color="success"
                            value={range}
                            onValueChange={(v) => setRange(v as number[])}
                        />
                    </LabeledRow>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

The framework-neutral form of Slider. 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("Slider", "slider", { /* 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 "slider slider-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.

The full API for Slider, on every path, is available through the Silica MCP server.