CSS Showcase · Live Demo

Sliders & range inputs.

Single-thumb sliders, dual-thumb ranges, vertical groups, and stepped controls — pick a device, then pick a design pattern for that device.

Featured demo

mobile · labelled
65%
40%

mobile design patterns

sliders-labelled.css
/* Labelled horizontal sliders */
.slider-grid[data-pattern="labelled"] {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@container (min-width: 420px) {
  .slider-grid[data-pattern="labelled"] { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 680px) {
  .slider-grid[data-pattern="labelled"] { grid-template-columns: repeat(3, 1fr); }
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border-radius: 999px;
}

CSS features used

  • • Container queries
  • • CSS Grid responsive columns
  • • Custom range styling
  • • Linear-gradient progress fill
  • • Dual-thumb range input
  • • Semantic tokens