Range Slider CSS Generator

Generate custom CSS range slider styles with live preview.

14.5Kuses
7.8/10(163)
50
6px
20px
3px
2px

CSS Code

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #333355;
  border-radius: 3px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #6366f1;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #6366f1;
  cursor: pointer;
}

input[type="range"]::-moz-range-progress {
  background: #6366f1;
  height: 6px;
  border-radius: 3px;
}

Recommended Products

Ad

Affiliate Disclosure: As an Amazon Associate, ToolBird earns from qualifying purchases. Links above are affiliate links — if you buy through them, we may earn a small commission at no extra cost to you.

Disclaimer: This tool is provided as-is for informational and educational purposes only.

ToolBird Assistant

Find the right tool instantly

Hey! I'm ToolBird Assistant. Tell me what you need and I'll find the right tool for you.