Are the ai2 Vertical 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.

Vertical sliders

Five sliders turned on their side: a thin line, a thick track, a ticked scale, a gradient fill and a compact outline. The value grows upward, the thumb reports aria-orientation vertical, and Up and Down arrows adjust it by one step.

SliderVertical

Installation

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

Run the following command

npx shadcn@latest add @ai2/slider-vertical

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

Install dependencies

npm install motion

Copy the source

components/ui/slider-vertical.tsx

"use client"

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

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

/* Slider vertical family: 5 vertical sliders. The value increases from bottom to
   top. A self-sufficient structure: a vertical track div + a fill div filling from
   the bottom + a thumb button. Pointer dragging (clientY within the track rect,
   with capture on the track) AND keyboard (Up/Down arrows, Shift for a large step,
   Home/End). Color comes ONLY from tokens, via alpha color-mix. The thumb spring is
   disabled under reduced-motion. */

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

const trackWidth: Record<StyledSize, string> = {
  sm: "w-1",
  md: "w-1.5",
  lg: "w-2.5",
  xl: "w-3.5",
}
const thickTrackWidth: Record<StyledSize, string> = {
  sm: "w-2.5",
  md: "w-3.5",
  lg: "w-5",
  xl: "w-6",
}
const thumbSize: Record<StyledSize, string> = {
  sm: "size-3.5",
  md: "size-4",
  lg: "size-5",
  xl: "size-6",
}
const thickThumbSize: Record<StyledSize, string> = {
  sm: "size-5",
  md: "size-6",
  lg: "size-7",
  xl: "size-9",
}
const rootHeight: Record<StyledSize, string> = {
  sm: "h-32",
  md: "h-40",
  lg: "h-48",
  xl: "h-56",
}
const compactHeight: Record<StyledSize, string> = {
  sm: "h-20",
  md: "h-24",
  lg: "h-28",
  xl: "h-32",
}

const rootBase =
  "relative flex touch-none select-none flex-col items-center justify-center outline-none"
/* Basparmak 24px altinda: gorunmez dokunma alani genisletmesi zorunlu. */
const thumbBase =
  "absolute left-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 VSliderProps = {
  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))
}

/* Ortak dikey slider davranisi. `pct` alttan olculen doluluk yuzdesi. */
function useVSlider(props: VSliderProps) {
  const {
    value,
    defaultValue = 45,
    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]
  )

  /* Dikeyde ust kenar max, alt kenar min. */
  const fromClientY = React.useCallback(
    (clientY: number) => {
      const el = trackRef.current
      if (!el) return current
      const rect = el.getBoundingClientRect()
      const ratio = rect.height > 0 ? (rect.bottom - clientY) / rect.height : 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(fromClientY(e.clientY))
    },
    [commit, fromClientY]
  )

  /* Pressing the thumb does not jump the value, it only starts the drag. */
  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(fromClientY(e.clientY))
    },
    [commit, dragging, fromClientY]
  )

  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 === "ArrowDown" || e.key === "ArrowLeft") next = current - delta
      else if (e.key === "ArrowUp" || e.key === "ArrowRight") 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,
    step,
    onPointerDown,
    onThumbPointerDown,
    onPointerMove,
    onPointerUp,
    onKeyDown,
  }
}

type VState = ReturnType<typeof useVSlider>

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

/* LineV: ince dikey iz, sade basparmak. */
export function LineVSlider({ className, size = "md", ...rest }: VSliderProps) {
  const reduce = useReducedMotion()
  const s = useVSlider(rest)
  return (
    <div
      data-slot="styled-slider"
      className={cn(rootBase, rootHeight[size], "w-6", className)}
    >
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative h-full cursor-pointer rounded-full bg-secondary",
          trackWidth[size]
        )}
      >
        <div
          className="absolute inset-x-0 bottom-0 rounded-full bg-primary"
          style={{ height: `${s.pct}%` }}
        />
        <VThumb
          s={s}
          reduce={reduce}
          sizeClass={thumbSize[size]}
          label="Value"
          className="border-2 border-background bg-primary shadow-sm"
        />
      </div>
    </div>
  )
}

/* ThickV: kalin yuvarlatilmis dikey iz + iri basparmak. */
export function ThickVSlider({ className, size = "md", ...rest }: VSliderProps) {
  const reduce = useReducedMotion()
  const s = useVSlider(rest)
  return (
    <div
      data-slot="styled-slider"
      className={cn(rootBase, rootHeight[size], "w-10", className)}
    >
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative h-full cursor-pointer rounded-full bg-secondary",
          thickTrackWidth[size]
        )}
      >
        <div
          className="absolute inset-x-0 bottom-0 rounded-full bg-primary"
          style={{ height: `${s.pct}%` }}
        />
        <VThumb
          s={s}
          reduce={reduce}
          sizeClass={thickThumbSize[size]}
          label="Value"
          className="border-4 border-background bg-primary shadow-md"
        />
      </div>
    </div>
  )
}

/* TicksV: izin sagina hizalanmis adim cizgileri, 10'luk adima kenetli. */
export function TicksVSlider({
  className,
  size = "md",
  step = 10,
  ...rest
}: VSliderProps) {
  const reduce = useReducedMotion()
  const s = useVSlider({ step, ...rest })
  const ticks = 11
  return (
    <div
      data-slot="styled-slider"
      className={cn(rootBase, rootHeight[size], "w-10", className)}
    >
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative h-full cursor-pointer rounded-full bg-secondary",
          trackWidth[size]
        )}
      >
        <div
          className="absolute inset-x-0 bottom-0 rounded-full bg-primary"
          style={{ height: `${s.pct}%` }}
        />
        <div className="pointer-events-none absolute inset-0" aria-hidden="true">
          {Array.from({ length: ticks }).map((_, i) => (
            <span
              key={i}
              className="absolute left-full h-px w-1.5 translate-x-1 translate-y-1/2 rounded-full bg-border"
              style={{ bottom: `${(i / (ticks - 1)) * 100}%` }}
            />
          ))}
        </div>
        <VThumb
          s={s}
          reduce={reduce}
          sizeClass={thumbSize[size]}
          label="Value"
          className="border-2 border-background bg-primary shadow-sm"
        />
      </div>
    </div>
  )
}

/* FillV: dolum cok tonlu token gradyani, iz yumusak token yuzeyi. */
export function FillVSlider({ className, size = "md", ...rest }: VSliderProps) {
  const reduce = useReducedMotion()
  const s = useVSlider(rest)
  return (
    <div
      data-slot="styled-slider"
      className={cn(rootBase, rootHeight[size], "w-10", className)}
    >
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative h-full cursor-pointer rounded-full bg-secondary",
          thickTrackWidth[size]
        )}
      >
        <div
          className="absolute inset-x-0 bottom-0 rounded-full [background-image:linear-gradient(0deg,var(--info),var(--brand),var(--success))]"
          style={{ height: `${s.pct}%` }}
        />
        <VThumb
          s={s}
          reduce={reduce}
          sizeClass={thumbSize[size]}
          label="Value"
          className="border-2 border-background bg-primary shadow-md"
        />
      </div>
    </div>
  )
}

/* CompactV: short, with a small thumb, for tight layouts. */
export function CompactVSlider({ className, size = "md", ...rest }: VSliderProps) {
  const reduce = useReducedMotion()
  const s = useVSlider(rest)
  return (
    <div
      data-slot="styled-slider"
      className={cn(rootBase, compactHeight[size], "w-6", className)}
    >
      <div
        ref={s.trackRef}
        onPointerDown={s.onPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative h-full cursor-pointer rounded-full border border-border bg-background",
          trackWidth[size]
        )}
      >
        <div
          className="absolute inset-x-0 bottom-0 rounded-full bg-foreground"
          style={{ height: `${s.pct}%` }}
        />
        <VThumb
          s={s}
          reduce={reduce}
          sizeClass={thumbSize[size]}
          label="Value"
          className="border border-border bg-background shadow-sm"
        />
      </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.

Line

A thin vertical track with a plain thumb.

Thick

A chunky vertical track with a large thumb.

Ticks

Step ticks run beside the track and the thumb snaps to them.

Fill

The fill rises as a bottom-to-top token gradient.

Compact

A short outlined track for tight layouts.

ai2 Vertical sliders: 5 styled variations on the token system

The ai2 Vertical sliders are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around vertically oriented sliders whose value grows upward. 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 Vertical sliders?

5 exports in one file: Line, Thick, Ticks, Fill and Compact. 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 Vertical 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.