CSS और JavaScript से कस्टम रेंज स्लाइडर कैसे बनाएं?

कस्टम रेंज स्लाइडर स्टाइलिंग

CSS और JavaScript से कस्टम रेंज स्लाइडर बनाने का कोड:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    .slidecontainer { width: 100%; }
    .slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 25px;
      background: #e478ff;
      outline: none;
      opacity: 0.7;
      -webkit-transition: 0.2s;
      transition: opacity 0.2s;
      border-radius: 20px;
    }
    .slider:hover { opacity: 1; }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      border-radius: 50%;
      width: 45px; height: 45px;
      background: rgb(200, 255, 0);
      border: 6px solid rgb(0, 105, 44);
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      border-radius: 20px;
      width: 25px; height: 25px;
      background: rgb(200, 255, 0);
      border: 6px solid rgb(0, 105, 44);
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>कस्टम रेंज स्लाइडर उदाहरण</h1>
  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" />
  </div>
  <h2 class="sliderVal">T</h2>
  
  <script>
    var slider = document.querySelector(".slider");
    var output = document.querySelector(".sliderVal");
    output.innerHTML = slider.value;
    slider.oninput = function() { output.innerHTML = this.value; };
  </script>
</body>
</html>

आउटपुट

• पर्पल ट्रैक, ग्रीन/येलो थंब वाला स्लाइडर
• होवर पर अपारदर्शिता बढ़ती है
• नीचे मान लाइव अपडेट होता है (1-100)

ब्राउज़र प्स्यूडो-एलिमेंट्स

क्रॉस-ब्राउज़र स्टाइलिंग

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 4px;
  background: #ddd; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #007bff; cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #007bff; border: none; cursor: pointer;
}
input[type="range"]::-moz-range-progress {
  background: #007bff; border-radius: 4px; height: 8px;
}

JavaScript एन्हांसमेंट्स

• oninput - ड्रैग करते समय लाइव अपडेट
• onchange - ड्रैग खत्म होने पर फाइनल वैल्यू
• डिस्प्ले में यूनिट जोड़ें (px, %, °C, आदि)
• स्टेप/मिन/मैक्स डायनामिकली सेट करें