Range Slider CSS مولد

.range {
  width: min(100%, 320px);
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0 62%, #cbd5e1 62% 100%);
}

.range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: white;
  border: 3px solid #2563eb;
  box-shadow: 0 8px 18px rgba(15,23,42,0.15);
}