---
title: "Elastic_Slider — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Velnium HQ · Carousels. A stretchy, bouncy, interactive slider."
canonical: "https://framer.elliotli.dev/component/elastic-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Elastic\_Slider

# Elastic\_Slider

A stretchy, bouncy, interactive slider.

[View on Framer](https://framer.com/marketplace/components/elastic-slider/?via=elliot-li)

![Elastic\_Slider preview image 1](https://framer.elliotli.dev/og/component/elastic-slider/789b6706e2a00ef7/1600x1200.jpg)

## Summary

A stretchy, bouncy, interactive slider.

## Description

The **Elastic Slider** is a high-performance Framer component built with **Framer Motion** to provide a tactile, playful user experience. Unlike standard range inputs, this component features a "decay" algorithm that allows the slider to stretch elastically when dragged beyond its minimum or maximum bounds, snapping back with a satisfying spring physics animation.

**Key Features:**

-   **Elastic Overflow:** Uses a sigmoid-based decay function to simulate physical resistance when reaching the track limits.
    
-   **Dynamic Scaling:** The slider track and icons react to hover and drag states, providing immediate visual feedback.
    
-   **Precision Control:** Supports both fluid movement and **Stepped** increments via a toggleable stepSize property.
    
-   **Fully Customizable:** Easily adjust colors for the track, range, and UI icons, plus toggleable numeric labels with adjustable font sizes.
    
-   **Built-in Layout:** Designed to be responsive and center-aligned, fitting perfectly into any side panel or dashboard interface.
    

## How to Use

### 1\. Installation

-   Copy the code for the ElasticSlider component.
    
-   In your Framer project, create a new **Code Component**.
    
-   Paste the code, save it, and drag the component onto your canvas.
    

### 2\. Configuration

Use the **Properties Panel** on the right to customize the slider:

-   **Values:** Set your Min, Max, and Default starting points.
    
-   **Stepped Mode:** Enable "Stepped" if you want the slider to snap to specific intervals (like 0, 10, 20).
    
-   **Styling:** Change the Range color (the filled part) and the Track color (the background).
    
-   **Label:** Toggle "Show Label" to display the current numeric value below the slider.
    

### 3\. Interaction

-   **Hover:** The slider will slightly scale up to indicate it is interactive.
    
-   **Drag:** Click and drag the track to change the value.
    
-   **Stretch:** Drag past the icons to see the "elastic" stretch effect.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #11016

## Details

- **Author**: Velnium HQ
- **Price**: $5.00
- **Published**: 2026-01-20
- **Updated**: 2026-01-22
- **Added**: 2026-01-06
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view