نحوه ایجاد اسلایدر محدوده در Html + css

اینکه بخواهید از یک منوی کشویی یا یک ورودی متن برای تغییر صدا در رایانه خود استفاده کنید، بسیار آزاردهنده است. دقیقا به همین دلیل است که ما از اسلایدرهای محدوده‌ای یا بازه‌ای استفاده می‌کنیم تا کاربران بتوانند به راحتی عددی را در محدوده‌ای از مقادیر مورد نظر خود انتخاب کنند.

اسلایدر محدوده یکی از رایج‌ترین عناصر فرم جدید معرفی‌شده با HTML5 است. پیش از این برای ایجاد یک اسلایدر ساده به جاوا اسکریپت نیاز داشتید، اما اکنون می‌توانید آن را فقط با استفاده از HTML ایجاد کنید و با CSS به آن استایل دهید. در این مطلب از شرکت طراحی سایت ایده پویا چگونگی انجام این کار را به شما خواهیم گفت.

قیمت ویژه طراحی سایت حرفه ای و طراحی سایت اختصاصی در ایده پویا؛ 02122920180

اسلایدر محدوده در HTML چیست؟

اسلایدر محدوده، یک نوع ورودی HTML است که به کاربر اجازه می‌دهد یک مقدار واحد را در محدوده بین دو مقدار انتخاب کند. اسلایدر محدوده در بیشتر موارد، از یک نوار افقی یا عمودی با یک دسته تشکیل می‌شود که کاربر با مکان‌نما یا انگشت خود آن را تنظیم می‌کند.

احتمالا این مورد را هنگام تنظیم صدا در مرورگر یا دستگاه خود مشاهده کرده‌اید. اسلایدرهای محدوده می‌توانند برای انتخاب یک مقدار خاص از یک مقیاس نسبتا بزرگ یا پیوسته از مقادیر نیز استفاده شوند. البته در صورتی که یک گزینه انتخاب فردی (مانند دکمه‌های رادیویی) عملی نباشد.

حتی ممکن است اسلایدرهای محدوده را با دو دسته ببینید که به شما امکان می‌دهد گستره‌ای را در یک محدوده انتخاب کنید. یک مثال خوب از این نمونه، عملکرد جستجوی Airbnb است. وقتی فیلتر خود را بر اساس محدوده قیمت انجام می‌دهید، دستگیره‌ها مرز پایین و بالای گستره قیمت مورد نظر شما را مشخص می‌کنند.

نحوه ایجاد یک اسلایدر محدوده با HTML

بیایید با یک اسلایدر اولیه که فقط با HTML ایجاد شده، شروع کنیم. برای افزودن عنصر اسلایدر به صفحه، از عنصر ورودی با محدوده نوع استفاده کنید.

شما با این تگ اصلی می‌توانید ویژگی‌های ورودی را تغییر دهید تا رفتار لغزنده نیز تغییر کند.

• ویژگی min کمترین مقدار مجاز در محدوده را مشخص می‌کند و مقدار پیش‌فرض برای آن صفر است.
• ویژگی max  بیشترین مقدار مجاز در محدوده را مشخص می‌کند و مقدار پیش‌فرض آن 100 است.
• مشخصه value مقدار پیش‌فرضی است که هنگام بارگیری نوار لغزنده انتخاب می‌شود. مقدار پیش‌فرض در میان مسیر و بین مقادیر حداقل و حداکثر است.

شما همچنین می‌توانید یک ویژگی دیگر به نام step نیز اضافه کنید. Step فاصله بین گزینه‌ها را در محدوده تعیین می‌کند و مقدار پیش‌فرض آن یک است. با این حال توجه داشته باشید که اگر مقدار مرحله را به 20 برسانید، اسلایدر چگونه تغییر می‌کند:

در صورتی که بخواهیم مقدار عددی انتخاب‌شده توسط کاربران را نمایش دهیم، باید از ویژگی oninput=“rangeValue.innerText = this.value”  و اضافه کردن تگ پاراگراف <p id=“rangeValue”>100</p  استفاده کنیم.

نحوه استایل دادن به اسلایدر محدوده با CSS

همان‌طور که می‌بینید، می‌توان به تنهایی با HTML یک اسلایدر بسیار ابتدایی ساخت. اگر می‌خواهید این اسلایدر بهتر به نظر برسد، باید از CSS استفاده کنید.

برای تغییر لغزنده  با CSS، لغزنده کلاس را به تگ ورودی اضافه می‌کنیم و اسلایدر را با چند CSS اصلی هدف قرار می‌دهیم.

در اینجا عرض و ارتفاع پیش‌فرض اسلایدر تغییر داده شده و حاشیه حذف شده است.  لبه‌ها را نیز گرد و پس‌زمینه را نارنجی کرده‌ایم.

دسته لغزنده هنوز آبی است. ما می‌توانیم با هدف قرار دادن شبه عنصر ::-webkit-slider-thumb  آن را نیز تغییر دهیم.

دسته بیشتر قابل مشاهده است. بهتر در نوار لغزنده قرار می‌گیرد و حتی مکان‌نما را به یک اشاره‌گر تغییر می‌دهد تا سیگنالی قابل‌تعامل برای کاربر باشد.

در نهایت اگر بخواهید لغزنده را عمودی کنید، می‌توانید از خاصیت transform  برای چرخش 270 درجه اسلایدر استفاده نمایید.

یک نوار لغزنده به صفحه خود اضافه کنید.

مزیت اسلایدرهای محدوده نسبت به یک فیلد ورودی، زمانی مشخص می‌شود که نیاز به دسترسی به طیف وسیعی از اعداد داشته باشید. از یک نوار لغزنده می‌توان در مواردی مانند کنترل صدا، رتبه‌بندی‌ها، امتیازات، محدودیت‌های وزنی و ... استفاده کرد. با یک ظاهر طراحی‌شده بازی کنید تا یک نوار لغزنده سفارشی متناسب با ظاهر سایت خود را بسازید.

• 32
• 0