كيف انشأ سلايدر بواسطة جافا سكربت؟

استخدم مكتبة Vanilla JS.

مثال لإنشاء سلايدر باستخدام جافا سكربت، يمكنك استخدام الكود التالي:

<div class="container">
  <input type="range" id="myRange">
  <p id="value"></p>
</div>

<script>
// إنشاء السلايدر
var slider = document.getElementById("myRange");
var value = document.getElementById("value");

// تحديث قيمة النص عند تغيير قيمة السلايدر
slider.addEventListener("change", function() {
  value.textContent = slider.value;
});
</script>

مثال اخر على كيفية استخدام سلايدر لعرض مجموعة من الصور:

<div class="container">
  <input type="range" id="myRange">
  <div class="images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

<script>
// إنشاء السلايدر
var slider = document.getElementById("myRange");
var images = document.querySelectorAll(".images img");

// تحديث صورة العرض عند تغيير قيمة السلايدر
slider.addEventListener("change", function() {
  var index = slider.value;
  images[index].style.display = "block";
});
</script>