Slider

npm install react-aria-components

"use client";

import { Label, Slider as AriaSlider, SliderOutput, SliderThumb, SliderTrack, type SliderProps as AriaSliderProps } from "react-aria-components";

const styles = {
  root: "flex w-full flex-col gap-(--tui-slider-gap) font-(family-name:--tui-font) text-(length:--tui-slider-font-size) leading-none data-disabled:opacity-(--tui-slider-disabled-opacity)",
  header: "flex items-baseline justify-between gap-3",
  label: "font-(--tui-slider-label-weight) text-(--tui-slider-label)",
  output: "text-(--tui-slider-value) tabular-nums",
  track: "relative h-(--tui-slider-thumb-size) w-full",
  rail: "absolute inset-x-0 top-1/2 h-(--tui-slider-height) -translate-y-1/2 rounded-(--tui-slider-radius) bg-(--tui-slider-track)",
  fill: "absolute left-0 top-1/2 h-(--tui-slider-height) -translate-y-1/2 rounded-(--tui-slider-radius) bg-(--tui-slider-fill)",
  thumb:
    "top-1/2 box-border size-(--tui-slider-thumb-size) rounded-full border-solid border-(length:--tui-slider-thumb-border-width) border-(--tui-slider-thumb-border) bg-(--tui-slider-thumb) shadow-(--tui-slider-thumb-shadow) outline-none data-focus-visible:[outline:var(--tui-slider-ring-width)_solid_var(--tui-slider-ring)] data-focus-visible:[outline-offset:var(--tui-slider-ring-offset)]",
};

export interface SliderProps extends Omit<AriaSliderProps<number>, "className" | "children"> {
  label?: string;
  /** Hides the number on the right. */
  hideValue?: boolean;
  className?: string;
}

export function Slider({ label, hideValue, className, ...props }: SliderProps) {
  return (
    <AriaSlider {...props} className={[styles.root, className].filter(Boolean).join(" ")}>
      {(label || !hideValue) && (
        <div className={styles.header}>
          {label ? <Label className={styles.label}>{label}</Label> : <span />}
          {!hideValue && <SliderOutput className={styles.output} />}
        </div>
      )}
      <SliderTrack className={styles.track}>
        {({ state }) => (
          <>
            <span className={styles.rail} />
            <span className={styles.fill} style={{ width: `${state.getThumbPercent(0) * 100}%` }} />
            <SliderThumb data-slot="slider-thumb" className={styles.thumb} />
          </>
        )}
      </SliderTrack>
    </AriaSlider>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Slider */
  --tui-slider-height: calc(var(--tui-space) * 1.5);
  --tui-slider-thumb-size: calc(var(--tui-space) * 4.5);
  --tui-slider-gap: calc(var(--tui-space) * 2.5);
  --tui-slider-radius: 999px;
  --tui-slider-thumb-border-width: 2px;
  --tui-slider-thumb-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  --tui-slider-font-size: 13px;
  --tui-slider-label-weight: 500;
  --tui-slider-track: var(--tui-muted);
  --tui-slider-fill: var(--tui-primary);
  --tui-slider-thumb: var(--tui-bg);
  --tui-slider-thumb-border: var(--tui-primary);
  --tui-slider-label: var(--tui-fg);
  --tui-slider-value: var(--tui-muted-fg);
  --tui-slider-ring: var(--tui-ring);
  --tui-slider-ring-width: 2px;
  --tui-slider-ring-offset: 2px;
  --tui-slider-disabled-opacity: 0.5;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}