پیکربندی پایه
برای اسلایدر ورودی از کلاس .form-control-slider در یک div خالی استفاده کنید که باید یک id داشته باشد.
مثال کد
<div class="form-control-wrap">
<div class="form-control-slider" data-start="30" id="Default-Range"></div>
</div>
| مرجع کد | جزئیات |
|---|---|
[data-min="0"] |
از {number} با ویژگی data-min برای حداقل مقدار استفاده کنید (به طور پیش فرض '0' است) |
[data-max="0"] |
از {number} با ویژگی data-max برای حداکثر مقدار استفاده کنید (به طور پیش فرض '100' است) |
[data-start="20"] |
از {number} با ویژگی data-start برای تعیین مقدار برای دستگیره اسلایدر استفاده کنید، این می تواند چندین مقدار را با فاصله ای مانند این جدا کند. [data-start="20 40"]
|
[data-connect="lower"] |
از {value} با ویژگی data-connect استفاده کنید تا مشخص کنید که دستگیره های اسلایدر به چیزی متصل هستند یا خیر. می توانید برای این کار از {lower, upper, true, false} استفاده کنید. lower با نقطه شروع متصل می شود، upper با نقطه پایان وصل می شود، true دستگیره ها را به یکدیگر متصل می کند. همچنین باید ترکیبی با تعداد دستگیره با نقاط اتصال ایجاد کنید، این می تواند چندین مقدار جدا شده با فضایی مانند این جدا کند. [data-connect="lower false true upper"]
|
اسلایدر عمودی
برای ایجاد این اسلایدر عمودی کافیست ویژگی [data-orientation="vertical"] را در عنصر .form-control-slider اضافه کنید.
| مرجع کد | جزئیات |
|---|---|
[data-min="0"] |
از {number} با ویژگی data-min برای حداقل مقدار استفاده کنید (به طور پیش فرض '0' است) |
پیکربندی پیشرفته
| مرجع کد | جزئیات |
|---|---|
[data-tooltip="true"] |
از {boolean} با ویژگی data-tooltip برای نمایش یا پنهان کردن راهنمای ابزار استفاده کنید. |
[data-min-distance="20"] |
از {number} با ویژگی data-min-distance برای تعریف مقدار حداقل محدوده استفاده کنید، به خاطر داشته باشید که اگر از مقدار step با این استفاده می کنید، این مقدار باید قابل تقسیم با مقدار مرحله ای باشد.
|
[data-max-distance="20"] |
از {number} با ویژگی data-max-distance برای تعریف مقدار حداکثر محدوده استفاده کنید، به خاطر داشته باشید که اگر از مقدار step با این استفاده می کنید، این مقدار باید قابل تقسیم با مقدار مرحله ای باشد.
|
