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

Range sliders

Five two-thumb range sliders that keep a real minimum and maximum in state: a plain dual, a live min/max readout, a stepped track, a labelled scale and a gradient fill. The thumbs clamp against each other so they never cross, and each thumb has its own role slider, label and keyboard control.

SliderRange

Installation

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

Run the following command

npx shadcn@latest add @ai2/slider-range

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

Install dependencies

npm install motion

Copy the source

components/ui/slider-range.tsx

"use client"

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

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

/* Slider range family: 5 dual-thumb range sliders. A self-sufficient structure (a
   native input[type=range] cannot take tokens): a track div + a fill div between the
   thumbs + two thumb buttons. Pointer dragging (clientX within the track rect, with
   capture on the track) AND keyboard (arrows/Shift+arrow/Home/End). The thumbs cannot
   pass each other: the lower thumb clamps to the upper value and the upper thumb to
   the lower one. Color comes ONLY from tokens. */

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

const trackHeight: Record<StyledSize, string> = {
  sm: "h-1",
  md: "h-1.5",
  lg: "h-2.5",
  xl: "h-3.5",
}
const thumbSize: Record<StyledSize, string> = {
  sm: "size-3.5",
  md: "size-4",
  lg: "size-5",
  xl: "size-6",
}
const thickTrackHeight: Record<StyledSize, string> = {
  sm: "h-2.5",
  md: "h-3.5",
  lg: "h-5",
  xl: "h-6",
}
const thickThumbSize: Record<StyledSize, string> = {
  sm: "size-5",
  md: "size-6",
  lg: "size-7",
  xl: "size-9",
}
const labelText: Record<StyledSize, string> = {
  sm: "text-[10px]",
  md: "text-[11px]",
  lg: "text-xs",
  xl: "text-sm",
}

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 RangeSliderProps = {
  className?: string
  size?: StyledSize
  min?: number
  max?: number
  step?: number
  value?: [number, number]
  defaultValue?: [number, number]
  onValueChange?: (v: [number, number]) => void
}

type ThumbIndex = 0 | 1

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

/* Shared range behaviour: controlled/uncontrolled pair of values, pointer dragging, keyboard. Each thumb clamps against the other, so the order can never break. */
function useRangeSlider(props: RangeSliderProps) {
  const {
    value,
    defaultValue = [25, 70],
    onValueChange,
    min = 0,
    max = 100,
    step = 1,
  } = props
  const trackRef = React.useRef<HTMLDivElement>(null)
  const [internal, setInternal] = React.useState<[number, number]>(() => [
    clamp(Math.min(defaultValue[0], defaultValue[1]), min, max),
    clamp(Math.max(defaultValue[0], defaultValue[1]), min, max),
  ])
  const [active, setActive] = React.useState<ThumbIndex | null>(null)
  const current = value ?? internal
  const lo = clamp(current[0], min, max)
  const hi = clamp(current[1], min, max)

  const commit = React.useCallback(
    (index: ThumbIndex, next: number) => {
      const snapped = clamp(Math.round(next / step) * step, min, max)
      const pair: [number, number] =
        index === 0 ? [clamp(snapped, min, hi), hi] : [lo, clamp(snapped, lo, max)]
      if (value === undefined) setInternal(pair)
      onValueChange?.(pair)
    },
    [hi, lo, max, min, onValueChange, step, value]
  )

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

  const capture = React.useCallback((pointerId: number) => {
    trackRef.current?.setPointerCapture?.(pointerId)
  }, [])

  /* On a press on the track: the nearest thumb is captured and jumps there. */
  const onTrackPointerDown = React.useCallback(
    (e: React.PointerEvent) => {
      e.preventDefault()
      capture(e.pointerId)
      const raw = fromClientX(e.clientX)
      const index: ThumbIndex = Math.abs(raw - lo) <= Math.abs(raw - hi) ? 0 : 1
      setActive(index)
      commit(index, raw)
    },
    [capture, commit, fromClientX, hi, lo]
  )

  /* When the thumb is pressed: the value does not change, only dragging begins. */
  const thumbPointerDown = React.useCallback(
    (index: ThumbIndex) => (e: React.PointerEvent) => {
      e.preventDefault()
      e.stopPropagation()
      capture(e.pointerId)
      setActive(index)
    },
    [capture]
  )

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

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

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

  const span = max > min ? max - min : 1
  const pctOf = React.useCallback(
    (v: number) => ((v - min) / span) * 100,
    [min, span]
  )

  return {
    trackRef,
    lo,
    hi,
    min,
    max,
    step,
    active,
    pctLo: pctOf(lo),
    pctHi: pctOf(hi),
    pctOf,
    onTrackPointerDown,
    thumbPointerDown,
    onPointerMove,
    onPointerUp,
    keyDown,
  }
}

type RangeState = ReturnType<typeof useRangeSlider>

/* Ortak thumb: rol, aria, klavye ve gorsel sinif tek yerde. */
function RangeThumb({
  s,
  index,
  size,
  reduce,
  className,
  sizeClass,
}: {
  s: RangeState
  index: ThumbIndex
  size: StyledSize
  reduce: boolean | null
  className?: string
  sizeClass?: string
}) {
  const v = index === 0 ? s.lo : s.hi
  return (
    <motion.button
      type="button"
      data-slot="styled-slider-thumb"
      role="slider"
      aria-label={index === 0 ? "Minimum" : "Maximum"}
      aria-valuenow={Math.round(v)}
      aria-valuemin={index === 0 ? s.min : Math.round(s.lo)}
      aria-valuemax={index === 0 ? Math.round(s.hi) : s.max}
      aria-orientation="horizontal"
      tabIndex={0}
      onPointerDown={s.thumbPointerDown(index)}
      onKeyDown={s.keyDown(index)}
      className={cn(thumbBase, sizeClass ?? thumbSize[size], className)}
      style={{ left: `${s.pctOf(v)}%` }}
      animate={{ scale: !reduce && s.active === index ? 1.18 : 1 }}
      transition={
        reduce
          ? { duration: 0 }
          : { type: "spring" as const, stiffness: 500, damping: 30, mass: 0.6 }
      }
    />
  )
}

/* Dual: sade cift basparmak, arada primary dolum. */
export function DualSlider({ className, size = "md", ...rest }: RangeSliderProps) {
  const reduce = useReducedMotion()
  const s = useRangeSlider(rest)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onTrackPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full bg-secondary",
          trackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 rounded-full bg-primary"
          style={{ left: `${s.pctLo}%`, width: `${s.pctHi - s.pctLo}%` }}
        />
      </div>
      <RangeThumb
        s={s}
        index={0}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-primary shadow-sm"
      />
      <RangeThumb
        s={s}
        index={1}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-primary shadow-sm"
      />
    </div>
  )
}

/* MinMax: live lower and upper value badges above the thumbs. */
export function MinMaxSlider({ className, size = "md", ...rest }: RangeSliderProps) {
  const reduce = useReducedMotion()
  const s = useRangeSlider(rest)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "mt-5", className)}>
      <div
        aria-hidden="true"
        className={cn(
          "pointer-events-none absolute -top-5 left-0 w-full font-medium text-muted-foreground",
          labelText[size]
        )}
      >
        <span
          className="absolute -translate-x-1/2 tabular-nums"
          style={{ left: `${s.pctLo}%` }}
        >
          {Math.round(s.lo)}
        </span>
        <span
          className="absolute -translate-x-1/2 tabular-nums"
          style={{ left: `${s.pctHi}%` }}
        >
          {Math.round(s.hi)}
        </span>
      </div>
      <div
        ref={s.trackRef}
        onPointerDown={s.onTrackPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full bg-secondary",
          trackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 rounded-full bg-info"
          style={{ left: `${s.pctLo}%`, width: `${s.pctHi - s.pctLo}%` }}
        />
      </div>
      <RangeThumb
        s={s}
        index={0}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-info shadow-sm"
      />
      <RangeThumb
        s={s}
        index={1}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-info shadow-sm"
      />
    </div>
  )
}

/* StepsRange: a range clamped to a step of 10, with step lines along the track. */
export function StepsRangeSlider({
  className,
  size = "md",
  step = 10,
  ...rest
}: RangeSliderProps) {
  const reduce = useReducedMotion()
  const s = useRangeSlider({ step, ...rest })
  const ticks = 11
  return (
    <div data-slot="styled-slider" className={cn(rootBase, className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onTrackPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full bg-secondary",
          trackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 rounded-full bg-primary"
          style={{ left: `${s.pctLo}%`, width: `${s.pctHi - s.pctLo}%` }}
        />
        <div className="pointer-events-none absolute inset-0" aria-hidden="true">
          {Array.from({ length: ticks }).map((_, i) => (
            <span
              key={i}
              className="absolute top-1/2 h-1.5 w-px -translate-x-1/2 -translate-y-1/2 rounded-full bg-border"
              style={{ left: `${(i / (ticks - 1)) * 100}%` }}
            />
          ))}
        </div>
      </div>
      <RangeThumb
        s={s}
        index={0}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-primary shadow-sm"
      />
      <RangeThumb
        s={s}
        index={1}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-primary shadow-sm"
      />
    </div>
  )
}

/* LabelsRange: izin altinda min / orta / max olcek etiketleri. */
export function LabelsRangeSlider({ className, size = "md", ...rest }: RangeSliderProps) {
  const reduce = useReducedMotion()
  const s = useRangeSlider(rest)
  const mid = Math.round((s.min + s.max) / 2)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "mb-5", className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onTrackPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer rounded-full bg-secondary",
          trackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 rounded-full bg-primary"
          style={{ left: `${s.pctLo}%`, width: `${s.pctHi - s.pctLo}%` }}
        />
      </div>
      <RangeThumb
        s={s}
        index={0}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-primary shadow-sm"
      />
      <RangeThumb
        s={s}
        index={1}
        size={size}
        reduce={reduce}
        className="border-2 border-background bg-primary shadow-sm"
      />
      <div
        aria-hidden="true"
        className={cn(
          "pointer-events-none absolute -bottom-5 left-0 flex w-full justify-between tabular-nums text-muted-foreground",
          labelText[size]
        )}
      >
        <span>{s.min}</span>
        <span>{mid}</span>
        <span>{s.max}</span>
      </div>
    </div>
  )
}

/* FillRange: kalin iz, aradaki dolum cok tonlu token gradyani. */
export function FillRangeSlider({ className, size = "md", ...rest }: RangeSliderProps) {
  const reduce = useReducedMotion()
  const s = useRangeSlider(rest)
  return (
    <div data-slot="styled-slider" className={cn(rootBase, "min-h-9", className)}>
      <div
        ref={s.trackRef}
        onPointerDown={s.onTrackPointerDown}
        onPointerMove={s.onPointerMove}
        onPointerUp={s.onPointerUp}
        className={cn(
          "relative w-full cursor-pointer overflow-hidden rounded-full bg-secondary",
          thickTrackHeight[size]
        )}
      >
        <div
          className="absolute inset-y-0 rounded-full [background-image:linear-gradient(90deg,var(--info),var(--brand),var(--success))]"
          style={{ left: `${s.pctLo}%`, width: `${s.pctHi - s.pctLo}%` }}
        />
      </div>
      <RangeThumb
        s={s}
        index={0}
        size={size}
        reduce={reduce}
        sizeClass={thickThumbSize[size]}
        className="border-[3px] border-background bg-primary shadow-md"
      />
      <RangeThumb
        s={s}
        index={1}
        size={size}
        reduce={reduce}
        sizeClass={thickThumbSize[size]}
        className="border-[3px] border-background bg-primary shadow-md"
      />
    </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.

Dual

Two thumbs with a solid fill between them.

Min max

Live minimum and maximum readouts follow each thumb.

Steps range

Both thumbs snap to a ten unit step over a ticked track.

Labels range

A scale of min, mid and max labels sits under the track.

Fill range

A thick track whose selected span is a token gradient.

ai2 Range sliders: 5 styled variations on the token system

The ai2 Range sliders are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around two-thumb range sliders with a clamped minimum and maximum. 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 active thumb; 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 the thumbs move directly.

What is in the ai2 Range sliders?

5 exports in one file: Dual, Min max, Steps range, Labels range and Fill range. 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 active thumb; pointer drag and keyboard both work.
Reduced-motion aware: Under prefers-reduced-motion, the thumb spring is disabled and the thumbs move 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 Range 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.