Elastic Range Slider

An elastic range slider built with pure HTML and CSS that provides a smooth and flexible value adjustment experience. It enhances interactive responsiveness and motion feedback while maintaining lightweight structure.

Usage

Use this component when interfaces require dynamic value control, such as volume settings, brightness adjustments, pricing filters, or configuration panels that benefit from responsive input feedback.

Implementation

The slider is implemented using a custom styled HTML range input, with CSS transitions applied to the thumb and track to simulate elastic style motion. Responsive styling ensures consistent usability across screen sizes.

HTML

<div class="slider-elastic">
  <input type="range" />
</div>

<div class="slider-elastic">
  <input type="range" />
</div>

CSS

.slider-elastic {
  width: 200px;
}

.slider-elastic input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
}

.slider-elastic input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}

.slider-elastic input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6366f1;
  margin-top: -4px;
  transition: transform 150ms ease;
}

.slider-elastic input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

@media (prefers-color-scheme: dark) {
  .slider-elastic input[type="range"]::-webkit-slider-runnable-track {
    background: #374151;
  }

  .slider-elastic input[type="range"]::-webkit-slider-thumb {
    background: #818cf8;
  }
}

.slider-elastic {
  width: 200px;
}

.slider-elastic input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
}

.slider-elastic input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}

.slider-elastic input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6366f1;
  margin-top: -4px;
  transition: transform 150ms ease;
}

.slider-elastic input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

@media (prefers-color-scheme: dark) {
  .slider-elastic input[type="range"]::-webkit-slider-runnable-track {
    background: #374151;
  }

  .slider-elastic input[type="range"]::-webkit-slider-thumb {
    background: #818cf8;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses custom range input styling
• Enhances value adjustment feedback
• Fully responsive across breakpoints
• Suitable for dashboards and control panels
• Easy to customize thumb shape and track color

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.