Slider

Guidelines#

Use it for limits and thresholds where the exact value matters less than the position: daily sending limit, company size range, lead score cut-off. Always show the current value as text next to the label.

What you provide: Radix slider props, value/onValueChange or defaultValue as an array (one entry per thumb), min (default 0), max (default 100), step, orientation, disabled, and an aria-label or a visible Label. Without a value it renders two thumbs at min and max.

Anatomy: the track is 6px (h-1.5), full width, rounded-full, bg-muted; the filled range is bg-primary. Thumbs are 16px circles, bg-white with a 1px border-primary and shadow-sm; hover and keyboard focus add a 4px ring-ring/50 (the colour and shadow transition). Vertical sliders are at least 176px tall (min-h-44). Disabled sliders drop to 50% opacity.

Don't use a slider for values the user must type precisely (use an input), or for fewer than four discrete options (use a toggle group).

Facts#

Group	Forms
Product	Crew OS
Global	window.DigitalCrew.Slider
Source	digitalcrew-orchestrator: components/ui/slider.tsx
Import in the app	import { Slider } from "@/components/ui/slider";

API#

TypeScript declarations emitted from components/ui/slider.tsx.

declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): any;
export { Slider };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    var a = React.useState([40]), b = React.useState([50, 500]);
    return h("div", { className: "grid max-w-md gap-7" },
      h("div", { className: "grid gap-3" },
        h("div", { className: "flex items-center justify-between text-sm" }, h(DC.Label, null, "Daily sending limit"), h("span", { className: "text-muted-foreground tabular-nums" }, a[0][0] + " emails")),
        h(DC.Slider, { value: a[0], onValueChange: a[1], min: 10, max: 100, step: 5, "aria-label": "Daily sending limit" })),
      h("div", { className: "grid gap-3" },
        h("div", { className: "flex items-center justify-between text-sm" }, h(DC.Label, null, "Company size"), h("span", { className: "text-muted-foreground tabular-nums" }, b[0][0] + "–" + b[0][1] + " employees")),
        h(DC.Slider, { value: b[0], onValueChange: b[1], min: 1, max: 1000, step: 10, "aria-label": "Company size" })));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#