Slider

Pick a numeric value within a range.

stableBase UI Slider

Preview

Code

tsx

import { Slider } from "@/components/ui/slider";

export function Example() {
  return <Slider defaultValue={40} min={0} max={100} step={1} />;
}

Props

Prop	Type	Default	Description
value	`number`	—	Controlled value.
defaultValue	`number`	—	Uncontrolled initial value.
onValueChange	`(value: number) => void`	—	Called as the value changes.
min	`number`	0	Minimum value.
max	`number`	100	Maximum value.
step	`number`	1	Granularity.
disabled	`boolean`	false	Disables interaction.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Built on Base UI Slider. Keyboard: arrows adjust by step, Home/End jump to min/max, PageUp/PageDown adjust by ~10%.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/slider.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

"use client";

import { cn } from "@/lib/utils";
import { Slider as BaseSlider } from "@base-ui-components/react/slider";
import type { ComponentPropsWithoutRef } from "react";

export function Slider({ className, ...props }: ComponentPropsWithoutRef<typeof BaseSlider.Root>) {
  return (
    <BaseSlider.Root
      className={cn("relative flex w-full touch-none select-none items-center", className)}
      {...props}
    >
      <BaseSlider.Control className="relative flex h-5 w-full items-center">
        <BaseSlider.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-bg-muted">
          <BaseSlider.Indicator className="absolute h-full bg-accent" />
        </BaseSlider.Track>
        <BaseSlider.Thumb
          className={cn(
            "block h-4 w-4 rounded-full border-2 border-accent bg-surface shadow-sm transition-colors",
            "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
          )}
        />
      </BaseSlider.Control>
    </BaseSlider.Root>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmSlider (extends Slider). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmSlider;

PrizmSlider()
PrizmSlider(double min, double max, double value)

Prop	Type	Default	Description
value	`DoubleProperty`	—	Current value.
min / max	`DoubleProperty`	—	Range bounds.

Thin subclass of Slider; muted track + accent-ringed thumb via the .slider rules. A custom skin (PrizmSliderSkin) adds the accent fill from the track start to the thumb, since JavaFX has no stock filled track. Mirrors components/ui/slider.tsx.