Slider with tooltip

Installation

$ npx shadcn@latest add https://goodui.dev/r/slider-tooltip.json

The file lands in components/goodui/slider-tooltip.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/slider-tooltip works too.

Usage

import * as React from "react"
import { SliderTooltip } from "@/components/goodui/slider-tooltip"

export function PriceFilter() {
  const [price, setPrice] = React.useState([40, 120])

  return (
    <div className="grid gap-4 rounded-xl border bg-card p-5 pt-10">
      <SliderTooltip
        value={price}
        onValueChange={setPrice}
        onValueCommit={(v) => console.log("fetch services between", v)}
        min={0}
        max={200}
        step={5}
        minStepsBetweenThumbs={2}
        formatValue={(v) => "$" + v}
        thumbLabels={["Minimum price", "Maximum price"]}
        marks={[{ value: 0 }, { value: 100 }, { value: 200 }]}
        name="price"
      />
    </div>
  )
}

When to use

Examples

<SliderTooltip
  aria-label="Session length"
  defaultValue={[60]}
  min={15}
  max={120}
  step={15}
  showSteps
  formatValue={(v) => v + " min"}
/>

<SliderTooltip
  aria-label="Seats"
  defaultValue={[10]}
  min={1}
  max={50}
  tooltip="always"
  formatValue={(v) => v + " seats"}
  marks={[{ value: 1, label: "Solo" }, { value: 10, label: "Team" }, { value: 50, label: "Business" }]}
/>

API reference

Accessibility

• •Each thumb is a focusable element with role="slider", aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext from formatValue.
• •Range thumbs are named by thumbLabels, or labels.minimum / labels.maximum ("Minimum" and "Maximum") by default; a single thumb takes thumbLabels[0], the root aria-label or aria-labelledby, and falls back to labels.value ("Value").
• •The root is role="group" and carries aria-label too.
• •The value bubble and marks are aria-hidden; screen readers get the value from aria-valuetext.
• •Clicking the track moves the nearest thumb and focuses it, so arrow keys continue from there.

Motion

• •The bubble scales in from 0.5 and rises 6px on a spring (stiffness 600, damping 30), and leaves in 120 ms.
• •The dragged thumb grows to 1.18 on a spring; the thumbs themselves follow the pointer directly, with no lag.
• •Reduced motion: the bubble only fades (100 ms) and the dragged thumb does not grow.

• •Dragging uses pointer capture on the track, so moves outside the slider keep working without window listeners.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related