مثال لإنشاء سلايدر باستخدام جافا سكربت، يمكنك استخدام الكود التالي:
<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>
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.
التعليقات