Wensity

Slider

An accessible slider built on Base UI, with keyboard and pointer support and a value bubble that reveals on drag.

carouselsliderrangeinputformdragbase ui
Loading preview

Examples

Practical examples and common states for the same installable component.

Sizes

Three heights map to the primitive control-height scale.

examples/slider-sizes.tsx
import { Slider } from "@/components/wensity/slider";


export function SliderSizes() {
  return (
    <div className="flex flex-col gap-6">
      <Slider defaultValue={30} size="sm" label="Small" />
      <Slider defaultValue={60} size="md" label="Medium" />
      <Slider defaultValue={80} size="lg" label="Large" />
    </div>
  );
}

Range

Two thumbs with a keyboard-accessible minimum distance.

examples/slider-range.tsx
"use client";


import * as React from "react";
import { SliderRange } from "@/components/wensity/slider";


export function SliderRangeExample() {
  const [range, setRange] = React.useState<[number, number]>([25, 75]);


  return (
    <SliderRange
      value={range}
      onValueChange={setRange}
      minDistance={10}
      label="Range"
    />
  );
}

Custom step

Snap to increments of 10 with keyboard PageUp/PageDown for larger jumps.

examples/slider-custom-step.tsx
import { Slider } from "@/components/wensity/slider";


export function SliderCustomStep() {
  return <Slider defaultValue={40} step={10} label="Step 10" />;
}

Disabled

Non-interactive state keeps track and thumb visible but muted.

examples/slider-disabled.tsx
import { Slider } from "@/components/wensity/slider";


export function SliderDisabled() {
  return <Slider defaultValue={50} disabled label="Disabled" />;
}

Controlled

Parent state drives the slider; commit fires on drag end and keyup.

examples/slider-controlled.tsx
"use client";


import * as React from "react";
import { Slider } from "@/components/wensity/slider";


export function SliderControlled() {
  const [value, setValue] = React.useState(40);


  return (
    <Slider
      value={value}
      onValueChange={setValue}
      onValueCommitted={setValue}
      formatValue={(v) => `${Math.round(v)}%`}
      label="Controlled"
    />
  );
}

Props

PropTypeDefaultDescription
valuenumber-Controlled value.
defaultValuenumber0Initial value when uncontrolled.
minnumber0Lowest selectable value.
maxnumber100Highest selectable value.
stepnumber1Granularity of movement.
onValueChange(value: number) => void-Called continuously as the thumb moves.
onValueCommit(value: number) => void-Called once when the drag ends. Use for expensive updates.
size"sm" | "md" | "lg""md"Track and thumb size.
tone"neutral" | "brand""brand"Colour of the filled track.
showValuebooleantrueShows the current value beside the label.
formatValue(value: number) => string-Formats the displayed value, for units or currency.
labelstring"Slider"Accessible label for the slider.
disabledbooleanfalseDisables the slider.