Are the ai2 Minimal sliders free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Minimal sliders

Five sliders stripped back to almost nothing: a hairline, a fill-free bare track, a ghost wash, a thin bar handle and a dotted rail. The visuals shrink but the behaviour does not: every thumb keeps its invisible touch target, role slider, label and keyboard control.

SliderMinimal

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/slider-minimal

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion

Copy the source

components/ui/slider-minimal.tsx

"use client"

import * as React from "react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Slider minimal family: 5 plain, low-emphasis sliders. A self-sufficient structure: a track div plus a fill div plus a thumb button. Pointer dragging (clientX against the track rect, with capture on the track) AND keyboard (arrows, Shift+arrow for a large step, Home/End). Because the visuals are thin, the thumb carries an invisible touch area. Colour comes ONLY from tokens, alpha via color-mix. Motion is off under reduced-motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const hairTrackHeight: Record<StyledSize, string> = {
  sm: "h-px",
  md: "h-px",
  lg: "h-0.5",
  xl: "h-0.5",
}
const thinTrackHeight: Record<StyledSize, string> = {
  sm: "h-0.5",
  md: "h-1",
  lg: "h-1",
  xl: "h-1.5",
}
const smallThumbSize: Record<StyledSize, string> = {
  sm: "size-2.5",
  md: "size-3",
  lg: "size-3.5",
  xl: "size-4",
}
const thumbSize: Record<StyledSize, string> = {
  sm: "size-3.5",
  md: "size-4",
  lg: "size-5",
  xl: "size-6",
}

const rootBase =
  "relative flex w-56 max-w-full touch-none select-none items-center outline-none"
/* Basparmak 24px altinda: gorunmez dokunma alani genisletmesi zorunlu. */
const thumbBase =
  "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full outline-none after:absolute after:-inset-1.5 after:content-[''] focus-visible:ring-[3px] focus-visible:ring-ring/50"

export type MinimalSliderProps = {
  className?: string
  size?: StyledSize
  min?: number
  max?: number
  step?: number
  value?: number
  defaultValue?: number
  onValueChange?: (v: number) => void
}

function clamp(v: number, min: number, max: number) {
  return Math.max(min, Math.min(max, v))
}

/* Shared horizontal slider behaviour: controlled/uncontrolled value, pointer,
   keyboard. */
function useSlider(props: MinimalSliderProps) {
  const {
    value,
    defaultValue = 50,
    onValueChange,
    min = 0,
    max = 100,
    step = 1,
  } = props
  const trackRef = React.useRef<HTMLDivElement>(null)
  const [internal, setInternal] = React.useState(() => clamp(defaultValue, min, max))
  const [dragging, setDragging] = React.useState(false)
  const current = value !== undefined ? clamp(value, min, max) : internal

  const commit = React.useCallback(
    (next: number) => {
      const c = clamp(Math.round(next / step) * step, min, max)
      if (value === undefined) setInternal(c)
      onValueChange?.(c)
    },
    [max, min, onValueChange, step, value]
  )

  const fromClientX = React.useCallback(
    (clientX: number) => {
      const el = trackRef.current
      if (!el) return current
      const rect = el.getBoundingClientRect()
      const ratio = rect.width > 0 ? (clientX - rect.left) / rect.width : 0
      return min + clamp(ratio, 0, 1) * (max - min)
    },
    [current, max, min]
  )

  const onPointerDown = React.useCallback(
    (e: React.PointerEvent) => {
      e.preventDefault()
      trackRef.current?.setPointerCapture?.(e.pointerId)
      setDragging(true)
      commit(fromClientX(e.clientX))
    },
    [commit, fromClientX]
  )

  const onThumbPointerDown = React.useCallback((e: React.PointerEvent) => {
    e.preventDefault()
    e.stopPropagation()
    trackRef.current?.setPointerCapture?.(e.pointerId)
    setDragging(true)
  }, [])

  const onPointerMove = React.useCallback(
    (e: React.PointerEvent) => {
      if (!dragging) return
      commit(fromClientX(e.clientX))
    },
    [commit, dragging, fromClientX]
  )

  const onPointerUp = React.useCallback((e: React.PointerEvent) => {
    trackRef.current?.releasePointerCapture?.(e.pointerId)
    setDragging(false)
  }, [])

  const onKeyDown = React.useCallback(
    (e: React.KeyboardEvent) => {
      const delta = e.shiftKey ? step * 10 : step
      let next = current
      if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = current - delta
      else if (e.key === "ArrowRight" || e.key === "ArrowUp") next = current + delta
      else if (e.key === "Home") next = min
      else if (e.key === "End") next = max
      else return
      e.preventDefault()
      commit(next)
    },
    [commit, current, max, min, step]
  )

  const pct = max > min ? ((current - min) / (max - min)) * 100 : 0

  return {
    trackRef,
    current,
    pct,
    dragging,
    min,
    max,
    onPointerDown,
    onThumbPointerDown,
    onPointerMove,
    onPointerUp,
    onKeyDown,
  }
}

type MinimalState = ReturnType<typeof useSlider>

/* Ortak thumb: rol, aria, klavye ve yay tek yerde. */
function MinimalThumb({
  s,
  reduce,
  sizeClass,
  className,
}: {
  s: MinimalState
  reduce: boolean | null
  sizeClass: string
  className?: string
}) {
  return (
    <motion.button
      type="button"
      data-slot="styled-slider-thumb"
      role="slider"
      aria-label="Value"
      aria-valuenow={Math.round(s.current)}
      aria-valuemin={s.min}
      aria-valuemax={s.max}
      aria-orientation="horizontal"
      tabIndex={0}
      onPointerDown={s.onThumbPointerDown}
      onKeyDown={s.onKeyDown}
      className={cn(thumbBase, sizeClass, className)}
      style={{ left: `${s.pct}%` }}
      animate={{ scale: !reduce && s.dragging ? 1.25 : 1 }}
      transition={
        reduce
          ? { duration: 0 }
          : { type: "spring" as const, stiffness: 500, damping: 30, mass: 0.6 }
      }
    />
  )
}

/* Hair: sac teli inceliginde iz, kucuk sade basparmak. */
export function HairSlider({ className, size = "md", ...rest }: MinimalSliderProps) {
  const reduce = useReducedMotion()
  const s = useSlider(rest)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "min-h-6", className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full bg-border",
          hairTrackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 left-0 rounded-full bg-foreground"
          style={{ width: `${s.pct}%` }}
        />
        <MinimalThumb
          s={s}
          reduce={reduce}
          sizeClass={smallThumbSize[size]}
          className="bg-foreground"
        />
      </div>
    </div>
  )
}

/* Bare: no fill, only the track and a hollow ring thumb. */
export function BareSlider({ className, size = "md", ...rest }: MinimalSliderProps) {
  const reduce = useReducedMotion()
  const s = useSlider(rest)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "min-h-6", className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full bg-border",
          thinTrackHeight[size]
        )}
      >
        <MinimalThumb
          s={s}
          reduce={reduce}
          sizeClass={thumbSize[size]}
          className="border-2 border-foreground bg-background"
        />
      </div>
    </div>
  )
}

/* Ghost: a very low-intensity track, with the thumb separated only by a token
   shadow. */
export function GhostSlider({ className, size = "md", ...rest }: MinimalSliderProps) {
  const reduce = useReducedMotion()
  const s = useSlider(rest)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "min-h-6", className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full [background-color:color-mix(in_oklab,var(--foreground)_8%,transparent)]",
          thinTrackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 left-0 rounded-full [background-color:color-mix(in_oklab,var(--foreground)_35%,transparent)]"
          style={{ width: `${s.pct}%` }}
        />
        <MinimalThumb
          s={s}
          reduce={reduce}
          sizeClass={smallThumbSize[size]}
          className="bg-background shadow-md ring-1 ring-border"
        />
      </div>
    </div>
  )
}

/* Thin: ince iz, dar dikdortgen kolcak basparmak. */
export function ThinSlider({ className, size = "md", ...rest }: MinimalSliderProps) {
  const reduce = useReducedMotion()
  const s = useSlider(rest)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "min-h-6", className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full bg-secondary",
          thinTrackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 left-0 rounded-full bg-foreground"
          style={{ width: `${s.pct}%` }}
        />
        <MinimalThumb
          s={s}
          reduce={reduce}
          sizeClass={cn(smallThumbSize[size], "w-1 rounded-sm")}
          className="h-4 bg-foreground"
        />
      </div>
    </div>
  )
}

/* Dot: dolum yok, tek notr nokta ve nokta izi. */
export function DotSlider({ className, size = "md", ...rest }: MinimalSliderProps) {
  const reduce = useReducedMotion()
  const s = useSlider(rest)
  const dots = 9
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "min-h-6", className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn("relative w-full cursor-pointer", thinTrackHeight[size])}
      >
        <div className="pointer-events-none absolute inset-0" aria-hidden="true">
          {Array.from({ length: dots }).map((_, i) => (
            <span
              key={i}
              className="absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border"
              style={{ left: `${(i / (dots - 1)) * 100}%` }}
            />
          ))}
        </div>
        <MinimalThumb
          s={s}
          reduce={reduce}
          sizeClass={smallThumbSize[size]}
          className="bg-foreground"
        />
      </div>
    </div>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Hair

A hairline track with a small solid thumb.

Bare

No fill at all, just a track and a ring thumb.

Ghost

A very low contrast wash track with a floating thumb.

Thin

A thin track with a narrow bar handle.

Dot

A dotted rail with a single travelling dot.

ai2 Minimal sliders: 5 styled variations on the token system

The ai2 Minimal sliders are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around understated, low contrast sliders. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion springs the thumb while dragging; pointer drag and keyboard both work. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the thumb spring is disabled and it moves directly.

What is in the ai2 Minimal sliders?

5 exports in one file: Hair, Bare, Ghost, Thin and Dot. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion springs the thumb while dragging; pointer drag and keyboard both work.
Reduced-motion aware: Under prefers-reduced-motion, the thumb spring is disabled and it moves directly.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Minimal sliders sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.