How to create a custom, styleable range slider with CSS?

To create a customizable range slider, you need to design the <input type="range"> cross-browser style through CSS pseudo-elements and browser-specific selectors; 1. Use standard HTML structure to define the minimum, maximum and default values of the slider; 2. Use ::-webkit-slider-runnable-track and ::-moz-range-track to style the slider track for WebKit and Firefox browsers respectively; 3. Use ::-webkit-slider-thumb and ::-moz-range-thumb to customize the slider handles, and remove the default appearance in WebKit; 4. Add:hover and:active states to improve the interactive experience; 5. Use JavaScript to dynamically update the background gradient to achieve visual feedback on the selected parts of the slider; 6. Integrate all styles and ensure cross-browser compatibility in the full example; end up with a modern, beautiful and functional custom slider, while maintaining accessibility and responsiveness.

Creating a custom, styleable range slider with CSS involves styling the <input type="range"> element across different browsers, since each renders it differently by default. With a mix of CSS pseudo-elements and browser-specific selectors, you can fully customize its appearance—track, thumb, and active states—while keeping it accessible and functional.

Here's how to build a clean, modern, and fully styleable range slider using HTML and CSS.

1. Basic HTML Structure

Start with a simple range input:

 <input type="range" class="slider" min="0" max="100" value="50">

This creates a default slider from 0 to 100, starting at 50.

2. Style the Slider Track (Cross-Browser)

The track is styled differently in WebKit (Chrome, Safari, Edge) and Firefox. You need to target both.

WebKit (Chrome, Safari, Edge)

Use ::-webkit-slider-runnable-track :

 .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  cursor: pointer;
}

Firefox

Use ::-moz-range-track :

 .slider::-moz-range-track {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  cursor: pointer;
}

Note: Firefox uses ::-moz-range-track , while WebKit uses ::-webkit-slider-runnable-track .

3. Style the Slider Thumb (Handle)

The draggable handle also requires browser-specific prefixes.

WebKit

 .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px; /* Align vertically with track */
}

-webkit-appearance: none removes default styling so you can apply custom styles.

Firefox

 .slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

Firefox's ::-moz-range-thumb is simpler—no need for appearance: none .

4. Add Hover and Active States

Make the slider feel interactive:

 .slider:hover::-webkit-slider-thumb {
  background: #45a049;
}

.slider:hover::-moz-range-thumb {
  background: #45a049;
}

.slider:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.slider:active::-moz-range-thumb {
  transform: scale(1.15);
}

You can also style the track differently when active (eg, change color as the user drags).

5. Optional: Style the Active (Progress) Part of the Track

To show a "filled" portion of the track (left side up to the thumb), you need extra markup or pseudo-elements. Since CSS can't directly style the "before" part of the track in standard inputs, one workaround is using a wrapper and background gradients.

Example using background gradient:

 .slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(
    to right,
    #4CAF50 0%,
    #4CAF50 50%,
    #ddd 50%,
    #ddd 100%
  );
  outline: none;
  border-radius: 4px;
  opacity: 0.9;
  transition: opacity .2s;
}

But this requires JavaScript to update the gradient based on value.

Better approach: Use a wrapper with pseudo-elements

 

  <input type="range" class="slider" min="0" max="100" value="50">

Then use CSS to layer the track and fill:

 .slider-wrapper {
  position: relative;
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: transparent;
  outline: none;
}

.slider::-webkit-slider-runnable-track {
  background: #ddd;
  height: 8px;
  border-radius: 4px;
}

/* Custom fill using pseudo-element (via JS or advanced CSS) */

For dynamic fill, JavaScript is usually required:

 const slider = document.querySelector('.slider');
slider.addEventListener('input', () => {
  const percent = (slider.value / (slider.max - slider.min)) * 100;
  slider.style.background = `linear-gradient(to right, #4CAF50 ${percent}%, #ddd ${percent}%)`;
});

Then add to CSS:

 .slider {
  background: linear-gradient(to right, #4CAF50 50%, #ddd 50%);
  background-size: 100% 8px;
  background-repeat: no-repeat;
  border-radius: 4px;
}

Now the track shows colored progress dynamically.

6. Full Minimal Example

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Custom Range Slider</title>
  <style>
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 8px;
      background: #ddd;
      border-radius: 4px;
      outline: none;
      opacity: 0.9;
      transition: opacity .2s;
    }

    .slider:hover {
      opacity: 1;
    }

    .slider::-webkit-slider-runnable-track {
      background: #ddd;
      height: 8px;
      border-radius: 4px;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border-radius: 50%;
      cursor: pointer;
      margin-top: -6px;
    }

    .slider::-moz-range-track {
      width: 100%;
      height: 8px;
      background: #ddd;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border: none;
      border-radius: 50%;
      cursor: pointer;
    }

    .slider:hover::-webkit-slider-thumb,
    .slider:hover::-moz-range-thumb {
      background: #45a049;
    }

    .slider:active::-webkit-slider-thumb {
      transform: scale(1.15);
    }

    .slider:active::-moz-range-thumb {
      transform: scale(1.15);
    }
  </style>
</head>
<body>
  <input type="range" class="slider" min="0" max="100" value="50" />
</body>
</html>

Key Tips

• Always test in multiple browsers (Chrome, Firefox, Safari, Edge).
• Use appearance: none only on the thumb in WebKit.
• For more advanced visuals (like dual thumbs or tooltips), consider libraries or custom React/Vue components.
• Accessibility is preserved as long as you don't remove keyboard support or ARIA roles.

That's it. You now have a fully custom, styleable range slider with clean, modern styling and cross-browser support. Basically just override the defaults and get creative with colors, shadows, and transitions.

The above is the detailed content of How to create a custom, styleable range slider with CSS?. For more information, please follow other related articles on the PHP Chinese website!