Elastic Slider — mcpskills.net

Create a custom range slider with an elastic feel. The thumb should stretch slightly in the drag direction, and the track fill should animate smoothly with a slight overshoot. Use CSS transitions and transform on a styled input range or a custom div-based slider. Use Tailwind CSS. Display the current value above the thumb. Place on a dark background.

创建一个带弹性感觉的自定义范围滑块。滑块拇指应向拖拽方向轻微拉伸，轨道填充应平滑动画并带轻微过冲。在样式化 input range 或自定义 div 滑块上使用 CSS transitions 和 transform。使用 Tailwind CSS。在拇指上方显示当前值。放置在深色背景上。

## Overview A slider that feels physical and responsive. Great for settings, price calculators, or filter controls that need a touch of delight. ## Features - Elastic thumb stretch - Smooth track fill animation - Slight overshoot - Current value display - Dark background - CSS-driven transitions ## Usage Use for pricing sliders, volume controls, or any range input where tactile feel matters. ## Customization Modify the prompt to: - Add tick marks with labels - Change thumb shape to circle/square - Add gradient track fill - Show min/max labels