ستروکیت

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

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

برای این کار از noUiSlider که یک افزونه جاوا اسکریپت سبک است استفاده خواهیم نمود. noUiSlider دارای ویژگی‌های فراوان است که هیچ وابستگی به افزونه خاصی ندارد، کیبورد را پشتیبانی می‌کند و به خوبی در طراحی‌های ریسپانسیو کار می‌کند.

نحوه‌ی کار آن ساده است. ابتدا فایل noUiSlider را دانلود کرده و در ‌HTML خود فراخوانی کنید.

<script src="nouislider.js"></script>

این خط را هم در کد HTML خود جایی که قرار است اسلایدر در آن نمایش داده شود قرار دهید:

<div class="slider"></div>

سپس فراخوانی تابع:

<script>
var slider = document.getElementById('slider');

noUiSlider.create(slider, {
 start: [20, 80],
 connect: true,
 range: {
   'min': 0,
   'max': 100
 }
});
</script>

در پکیج دانلود این افزونه مثال‌هایی از کاربرد این افزونه وجود دارد که می‌توانید استفاده کنید.

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