Modern Borderless Pure CSS Range Sliders (5+ Colors & Styles)

Style HTML range sliders with a sleek, borderless design using this pure CSS collection. Features modern thumb and track styles, plus color variations (blue, green, red, orange, grey). Achieve a contemporary look for your forms and UI elements without JavaScript.

#css

#range slider

#input range

#pure css

#html

#form element

#ui component

#modern design

#borderless

#custom style

#multiple colors

#accessible forms

/HTML *CSS ()JS Output Live Updates

html, body {
  background-color: #f8f9fa;
}
/* ==== Global Showcase Styles ==== */
.rs-showcase-container.rs-modern-showcase {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #212529;
}
.rs-modern-showcase .rs-section-title {
  font-size: 1.5em;
  color: #343a40;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
}
.rs-modern-showcase .rs-section {
  display: flex;
  flex-direction: column; 
  gap: 18px; 
  background-color: #ffffff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 30, 80, 0.05);
}
.rs-modern-showcase .rs-section label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9em;
  color: #495057;
  font-weight: 500;
}

/* ==== Base Modern Range Slider Styles (.rs-control) ==== */
.rs-control {
  -webkit-appearance: none; 
  appearance: none;
  width: 100%; 
  height: 24px; /* Increased overall height for better thumb interaction */
  background: transparent; 
  cursor: pointer;
  outline: none; 
}

/* --- WebKit (Chrome, Safari, Edge, Opera) --- */
.rs-control::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #e9ecef; /* Neutral track color */
  border-radius: 3px;
  /* border: none; Removed */
}

.rs-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -7px; /* (track_height - thumb_height) / 2 -> (6 - 20) / 2 = -7 */
  width: 20px;
  height: 20px;
  background: #007bff; /* Default thumb color (blue) */
  border-radius: 50%; 
  /* border: none; Removed */
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.rs-control:active::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.rs-control:focus-visible::-webkit-slider-thumb {
  outline: 3px solid rgba(0, 123, 255, 0.3);
  outline-offset: 1px;
}

/* --- Mozilla Firefox --- */
.rs-control::-moz-range-track {
  width: 100%;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  border: none; /* Explicitly removed */
}

.rs-control::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  border: none; /* Explicitly removed */
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.rs-control:active::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.rs-control:focus-visible::-moz-range-thumb {
  outline: 3px solid rgba(0, 123, 255, 0.3);
  outline-offset: 1px;
}

/* ==== Style Variation 1: Flat Modern (rs-flat-modern) ==== */
/* Uses the base styles - this class is for clarity */

/* ==== Style Variation 2: Rounded Pill Style (rs-pill) ==== */
.rs-pill { height: 28px; /* Slightly taller for pill */}
.rs-pill::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; }
.rs-pill::-moz-range-track { height: 10px; border-radius: 5px; }
.rs-pill::-webkit-slider-thumb { margin-top: -7px; width: 24px; height: 24px; border-radius: 12px; }
.rs-pill::-moz-range-thumb { width: 24px; height: 24px; border-radius: 12px; }

/* ==== Style Variation 3: Slim Minimal (rs-slim-minimal) ==== */
.rs-slim-minimal { height: 16px; }
.rs-slim-minimal::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: #ced4da; }
.rs-slim-minimal::-moz-range-track { height: 2px; border-radius: 1px; background: #ced4da; }
.rs-slim-minimal::-webkit-slider-thumb {
  margin-top: -7px; /* (2 - 16) / 2 = -7 */
  width: 16px; height: 16px; border-radius: 50%; 
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.rs-slim-minimal::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* ==== Style Variation 4: Subtle Shadow Thumb (rs-shadow-thumb) ==== */
/* This style primarily uses the base thumb shadow. We can make track more subtle */
.rs-shadow-thumb::-webkit-slider-runnable-track { background: #f1f3f5; }
.rs-shadow-thumb::-moz-range-track { background: #f1f3f5; }
.rs-shadow-thumb::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 3px rgba(255,255,255,0.3) inset; }
.rs-shadow-thumb::-moz-range-thumb { box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 3px rgba(255,255,255,0.3) inset; }

/* ==== Color Variations (Applied to Thumb and optionally Track) ==== */
/* Base track color is #e9ecef */

/* Blue Theme */
.rs-blue::-webkit-slider-thumb { background: #2196F3; }
.rs-blue::-moz-range-thumb { background: #2196F3; }
.rs-blue:focus-visible::-webkit-slider-thumb { outline-color: rgba(33, 150, 243, 0.4); }
.rs-blue:focus-visible::-moz-range-thumb { outline-color: rgba(33, 150, 243, 0.4); }
/* Optional themed track */
.rs-blue::-webkit-slider-runnable-track { background: #bbdefb; }
.rs-blue::-moz-range-track { background: #bbdefb; }

/* Green Theme */
.rs-green::-webkit-slider-thumb { background: #4CAF50; }
.rs-green::-moz-range-thumb { background: #4CAF50; }
.rs-green:focus-visible::-webkit-slider-thumb { outline-color: rgba(76, 175, 80, 0.4); }
.rs-green:focus-visible::-moz-range-thumb { outline-color: rgba(76, 175, 80, 0.4); }
.rs-green::-webkit-slider-runnable-track { background: #c8e6c9; }
.rs-green::-moz-range-track { background: #c8e6c9; }

/* Red Theme */
.rs-red::-webkit-slider-thumb { background: #f44336; }
.rs-red::-moz-range-thumb { background: #f44336; }
.rs-red:focus-visible::-webkit-slider-thumb { outline-color: rgba(244, 67, 54, 0.4); }
.rs-red:focus-visible::-moz-range-thumb { outline-color: rgba(244, 67, 54, 0.4); }
.rs-red::-webkit-slider-runnable-track { background: #ffcdd2; }
.rs-red::-moz-range-track { background: #ffcdd2; }

/* Orange Theme */
.rs-orange::-webkit-slider-thumb { background: #ff9800; }
.rs-orange::-moz-range-thumb { background: #ff9800; }
.rs-orange:focus-visible::-webkit-slider-thumb { outline-color: rgba(255, 152, 0, 0.4); }
.rs-orange:focus-visible::-moz-range-thumb { outline-color: rgba(255, 152, 0, 0.4); }
.rs-orange::-webkit-slider-runnable-track { background: #ffe0b2; }
.rs-orange::-moz-range-track { background: #ffe0b2; }

/* Grey Theme */
.rs-grey::-webkit-slider-thumb { background: #78909c; }
.rs-grey::-moz-range-thumb { background: #78909c; }
.rs-grey:focus-visible::-webkit-slider-thumb { outline-color: rgba(120, 144, 156, 0.4); }
.rs-grey:focus-visible::-moz-range-thumb { outline-color: rgba(120, 144, 156, 0.4); }
.rs-grey::-webkit-slider-runnable-track { background: #cfd8dc; }
.rs-grey::-moz-range-track { background: #cfd8dc; }

<h3 class="rs-section-title">Smooth & Flat Range Sliders</h3>
  <div class="rs-section">
    <label for="m-range1">Blue Flat:</label>
    <input type="range" id="m-range1" class="rs-control rs-flat-modern rs-blue" min="0" max="100" value="50">
    <label for="m-range2">Green Flat:</label>
    <input type="range" id="m-range2" class="rs-control rs-flat-modern rs-green" min="0" max="100" value="75">
  </div>

<h3 class="rs-section-title">Rounded Pill Style Sliders</h3>
  <div class="rs-section">
    <label for="m-range3">Red Rounded Pill:</label>
    <input type="range" id="m-range3" class="rs-control rs-pill rs-red" min="0" max="100" value="30">
    <label for="m-range4">Orange Rounded Pill:</label>
    <input type="range" id="m-range4" class="rs-control rs-pill rs-orange" min="0" max="100" value="60">
  </div>

<h3 class="rs-section-title">Minimal Slim Sliders</h3>
  <div class="rs-section">
    <label for="m-range5">Grey Slim Minimal:</label>
    <input type="range" id="m-range5" class="rs-control rs-slim-minimal rs-grey" min="0" max="100" value="40">
    <label for="m-range6">Blue Slim Minimal:</label>
    <input type="range" id="m-range6" class="rs-control rs-slim-minimal rs-blue" min="0" max="100" value="85">
  </div>

<h3 class="rs-section-title">Subtle Shadow Thumb Sliders</h3>
  <div class="rs-section">
    <label for="m-range7">Green Shadow Thumb:</label>
    <input type="range" id="m-range7" class="rs-control rs-shadow-thumb rs-green" min="0" max="100" value="25">
    <label for="m-range8">Orange Shadow Thumb:</label>
    <input type="range" id="m-range8" class="rs-control rs-shadow-thumb rs-orange" min="0" max="100" value="90">
  </div>

</div>