# Spring Slider — Skecher UI

A pill-track slider with a spring-driven fill and thumb, tick markers for each step, and a tooltip that blurs in and out as you drag.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/spring-slider
```

## Dependencies

- motion
- @number-flow/react

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { SpringSlider } from "@/components/ui/spring-slider";

export default function SpringSliderExample() {
  const [size, setSize] = useState(16);

  return (
    <SpringSlider
      aria-label="Text size"
      min={12}
      max={28}
      step={4}
      value={size}
      onValueChange={setSize}
      valueText={(value) => `${value} pixels`}
      renderTooltip={(value) => (
        <span style={{ fontSize: `${value}px` }}>Aa</span>
      )}
    />
  );
}
```

## Source files

- components/ui-components/spring-slider.tsx — Spring-driven pill slider with tick markers and a blur-fade tooltip

## Canonical resources

- Documentation: https://skecher-ui.com/docs/spring-slider
- Registry item with complete source: https://skecher-ui.com/r/spring-slider.json
- Component AI context: https://skecher-ui.com/llms/spring-slider