كيفية انشاء شريط تمرير النطاق المتحرك المخصص باستخدام HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط تمرير نطاق متحرك مخصص باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط تمرير نطاق متحرك مخصص باستخدام HTML CSS وجافا سكريبت.

يوفر شريط تمرير النطاق مقبضين لتعيين الحد الأدنى والحد الأقصى لقيمة متصلة رقمية. يتم استخدام Range Slider على صفحات الويب للسماح للمستخدم بتحديد قيمة رقمية يجب ألا تقل عن قيمة معينة ، ولا تزيد عن قيمة معينة أخرى. أي أنه يسمح لنا باختيار قيمة من نطاق يتم تمثيله على شكل شريط تمرير.

في هذا البرنامج (Custom Animated Range Slider) ، على صفحة الويب ، يوجد صندوق حاوية أبيض وداخل هذا المربع ، يوجد شريط تمرير النطاق. في البداية ، تكون قيمة تلميح الأداة المركزي مخفية ولكن عند تحريك أو تغيير قيمة شريط تمرير النطاق ، تكون قيمة تلميح الأداة المركزية مرئية وهذه القيمة ديناميكية ولكن القيمتين الأخريين ثابتتان.

تعني القيمة الديناميكية أن القيمة تتغير وفقًا لقيمة النطاق ولكن قيم الجانب الأيمن والأيسر ثابتة ولا تتغير. يمكنك أيضًا إنشاء شريط تمرير نطاق افتراضي باستخدام HTML5 <input type = ”range”> لكن شريط تمرير النطاق الافتراضي لا يمكنه جذب الزوار ومشاهدي المحتوى نحو موقع الويب. إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Custom Animated Range Slider).

في الفيديو ، لقد رأيت كيف يعمل هذا النطاق المتزلج وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء شريط تمرير النطاق هذا. في الواقع ، يعتمد كل التصميم على HTML و CSS فقط ولكني استخدمت JavaScript لتغيير القيمة وفقًا لقيمة النطاق وتغيير موضع تلميح الأداة. تذكر أن لون خلفية تقدم النطاق يظهر فقط على متصفح Firefox.

إذا كنت تحب هذا البرنامج (Custom Animated Range Slider) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك وصفحات HTML.

شريط تمرير نطاق متحرك مخصص
لإنشاء هذا البرنامج (Custom Animated Range Slider). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow