<div class="radikalwp-fm-range"><input type="range" min="0" max="100" value="65" /><div class="radikalwp-fm-range-l"><span>۰<//span><span>۱۰۰<//span><//div><//div>
.radikalwp-fm-range { width: 250px; }
.radikalwp-fm-range input { width: 100%; appearance: none; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #4f46e5 65%, #e2e8f0 65%); outline: none; }
.radikalwp-fm-range input::-webkit-slider-thumb {
appearance: none;
width: 22px;
height: 22px;
background: #fff;
border: 3px solid #4f46e5;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 10px rgba(79, 70, 229, .35);
transition: transform .18s ease;
}
.radikalwp-fm-range input::-webkit-slider-thumb:hover { transform: scale(1.18); }
.radikalwp-fm-range-l { display: flex; justify-content: space-between; font-size: 10.5px; color: #94a3b8; margin-top: 6px; }
درباره این اسنیپت
اسلایدر با باریکشده و بندانگشتی رنگی سفارشی؛ بدون ظاهر پیشفرض مرورگر. برای فیلتر قیمت، تنظیم حجم و هر مقدار پیوستهای مناسب است. این فیلد برای فرمهای ورود، ثبتنام، جستجو و فیلتر طراحی شده و فوکوس و حالتهای خطا را پوشش میدهد. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!