✨ Working with PDFs, images or videos? Discover 145+ free web apps built for everyday tasks
Wensity

Slider

A keyboard- and pointer-accessible slider built on Base UI with a value bubble that reveals on drag or focus.

sliderrangeinputformdragbase 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"
    />
  );
}