سلام, محسن م

##### noUiSlider

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

### noUiSlider

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										noUiSlider
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group row mb-6">
    											<label class="col-form-label text-right col-lg-3 col-sm-12">نمونه پایه</label>
    											<div class="col-lg-6 col-md-12 col-sm-12">
    												<div class="row align-items-center">
    													<div class="col-4">
    														<input type="text" class="form-control" id="kt_nouislider_1_input"  placeholder="Quantity"/>
    													</div>
    													<div class="col-8">
    														<div id="kt_nouislider_1" class="nouislider-drag-danger"></div>
    													</div>
    												</div>
    												<span class="form-text text-muted mt-6">اینپوت با کنترل اسلایدر</span>
    											</div>
    										</div>
    										<div class="separator separator-dashed my-10"></div>

    										<div class="form-group row mb-6">
    											<label class="col-form-label text-right col-lg-3 col-sm-12">واحد پول</label>
    											<div class="col-lg-6 col-md-12 col-sm-12">
    												<div class="row align-items-center">
    													<div class="col-4">
    														<input type="text" class="form-control" id="kt_nouislider_2_input"  placeholder="واحد پول"/>
    													</div>
    													<div class="col-8">
    														<div id="kt_nouislider_2" class="nouislider nouislider-handle-danger"></div>
    													</div>
    												</div>
    												<span class="form-text text-muted mt-6">To format the slider output, noUiSlider offers a  format option.</span>
    											</div>
    										</div>

    										<div class="separator separator-dashed my-10"></div>

    										<div class="form-group row mb-6">
    											<label class="col-form-label text-right col-lg-3 col-sm-12">با تولتیپ</label>
    											<div class="col-lg-6 col-md-12 col-sm-12">
    												<div class="row align-items-center">
    													<div class="col-2">
    														<input type="text" class="form-control" id="kt_nouislider_3_input"  placeholder="Quantity"/>
    													</div>
    													<div class="col-2">
    														<input type="text" class="form-control" id="kt_nouislider_3.1_input"  placeholder="Quantity"/>
    													</div>
    													<div class="col-8">
    														<div id="kt_nouislider_3" class="nouislider"></div>
    													</div>
    												</div>
    												<span class="form-text text-muted mt-6">برای نمایش مقادیر کشویی ، با راهنمایی های کشویی همراه شوید.</span>
    											</div>
    										</div>

    										<div class="separator separator-dashed my-10"></div>

    										<div class="form-group row mb-6">
    											<label class="col-form-label text-right col-lg-3 col-sm-12">اسلایدر رنگی</label>
    											<div class="col-lg-6 col-md-12 col-sm-12">
    												<div class="row align-items-center">
    													<div class="col-2">
    														<select class="form-control" id="kt_nouislider_input_select"></select>
    													</div>
    													<div class="col-2">
    														<input type="number" class="form-control" id="kt_nouislider_input_number"  placeholder="Quantity"/>
    													</div>
    													<div class="col-8">
    														<div id="kt_nouislider_4" class="nouislider nouislider-handle-primary nouislider-connect-warning"></div>
    													</div>
    												</div>
    												<span class="form-text text-muted mt-6">برای تغییر مسیر اتصال نوار لغزنده و رنگ ها از کلاس های حالت استفاده کنید.</span>
    											</div>
    										</div>

    										<div class="separator separator-dashed my-10"></div>

    										<div class="form-group row mb-6">
    											<label class="col-form-label text-right col-lg-3 col-sm-12">محدودیت های نرم</label>
    											<div class="col-lg-6 col-md-12 col-sm-12">
    												<div class="row align-items-center">
    													<div class="col-4">
    														<input type="text" class="form-control" id="kt_nouislider_5_input"  placeholder="Quantity"/>
    													</div>
    													<div class="col-8">
    														<div id="kt_nouislider_5"></div>
    													</div>
    												</div>
    												<span class="form-text text-muted mt-8">لبه های کشویی را که در آن هنگام انتقال آزاد می شود ، غیرفعال می کند</span>
    											</div>
    										</div>

    										<div class="separator separator-dashed my-10"></div>

    										<div class="form-group row mb-6">
    											<label class="col-form-label text-right col-lg-3 col-sm-12">اسلایدر عمودی</label>
    											<div class="col-lg-6 col-md-12 col-sm-12">
    												<div class="row">
    													<div class="col-4">
    														<input type="text" class="form-control" id="kt_nouislider_6_input"  placeholder="Quantity"/>
    													</div>
    													<div class="col-8">
    														<div id="kt_nouislider_6"></div>
    													</div>
    												</div>
    												<span class="form-text text-muted">اسلایدر عمودی</span>
    											</div>
    										</div>

    										<div class="separator separator-dashed my-10"></div>

    										<div class="form-group row mb-6">
    											<label class="col-form-label text-right col-lg-3 col-sm-12">مودال</label>
    											<div class="col-lg-4 col-md-9 col-sm-12">
    												<a href="" class="btn btn-light-primary font-weight-bold" data-toggle="modal" data-target="#kt_nouislider_modal">راه اندازی مودال</a>
    											</div>
    										</div>
    									</div>
    									<div class="card-footer">
    										<div class="row">
    											<div class="col-lg-9 ml-lg-auto">
    												<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    												<button type="reset" class="btn btn-secondary">لغو</button>
    											</div>
    										</div>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

    						// کلاس definition
    						var KTnoUiSliderنسخه ی نمایشیs = function() {

    							// خصوصی functions
    							var demo1 = function() {
    								// init slider
    								var slider = document.getElementById('kt_nouislider_1');

    								noUiSlider.create(slider, {
    									start: [ 0 ],
    									step: 2,
    									range: {
    										'min': [ 0 ],
    										'max': [ 10 ]
    									},
    									format: wNumb({
    										decimals: 0
    									})
    								});

    								// init slider input
    								var sliderورودی = document.getElementById('kt_nouislider_1_input');

    								slider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودی.value = values[handle];
    								});

    								sliderورودی.addرویدادلیستener('change', function(){
    									slider.noUiSlider.set(this.value);
    								});
    							}

    							var demo2 = function() {
    								// init slider
    								var slider = document.getElementById('kt_nouislider_2');

    								noUiSlider.create(slider, {
    									start: [ 20000 ],
    									connect: [true, false],
    									step: 1000,
    									range: {
    										'min': [ 20000 ],
    										'max': [ 80000 ]
    									},
    									format: wNumb({
    										decimals: 3,
    										thousand: '.',
    										postfix: ' (US دلار)',
    									})
    								});

    								// init slider input
    								var sliderورودی = document.getElementById('kt_nouislider_2_input');

    								slider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودی.value = values[handle];
    								});

    								sliderورودی.addرویدادلیستener('change', function(){
    									slider.noUiSlider.set(this.value);
    								});
    							}

    							var demo3 = function() {
    								// init slider
    								var slider = document.getElementById('kt_nouislider_3');

    								noUiSlider.create(slider, {
    									start: [20, 80],
    									connect: true,
    									direction: 'rtl',
    									tooltips: [true, wNumb({ decimals: 1 })],
    									range: {
    										'min': [0],
    										'10%': [10, 10],
    										'50%': [80, 50],
    										'80%': 150,
    										'max': 200
    									}
    								});

    								// init slider input
    								var sliderورودی0 = document.getElementById('kt_nouislider_3_input');
    								var sliderورودی1 = document.getElementById('kt_nouislider_3.1_input');
    								var sliderورودیs = [sliderورودی1, sliderورودی0];

    								slider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودیs[handle].value = values[handle];
    								});
    							}

    							var demo4 = function() {

    							var slider = document.getElementById('kt_nouislider_input_select');

    								// Append the option elements
    								for ( var i = -20; i <= 40; i++ ){

    									var option = document.createElement('option');
    										option.text = i;
    										option.value = i;

    									slider.appendChild(option);
    								}

    								// init slider
    								var html5Slider = document.getElementById('kt_nouislider_4');

    								noUiSlider.create(html5Slider, {
    									start: [ 10, 30 ],
    									connect: true,
    									range: {
    										'min': -20,
    										'max': 40
    									}
    								});

    								// init slider input
    								var inputعدد = document.getElementById('kt_nouislider_input_number');

    								html5Slider.noUiSlider.on('update', function( values, handle ) {

    									var value = values[handle];

    									if ( handle ) {
    										inputعدد.value = value;
    									} else {
    										slider.value = Math.round(value);
    									}
    								});

    								slider.addرویدادلیستener('change', function(){
    									html5Slider.noUiSlider.set([this.value, null]);
    								});

    								inputعدد.addرویدادلیستener('change', function(){
    									html5Slider.noUiSlider.set([null, this.value]);
    								});
    							}

    							var demo5 = function() {
    								// init slider
    								var slider = document.getElementById('kt_nouislider_5');

    								noUiSlider.create(slider, {
    									start: 20,
    									range: {
    										min: 0,
    										max: 100
    									},
    									pips: {
    										mode: 'values',
    										values: [20, 80],
    										density: 4
    									}
    								});

    								var sliderورودی = document.getElementById('kt_nouislider_5_input');

    								slider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودی.value = values[handle];
    								});

    								sliderورودی.addرویدادلیستener('change', function(){
    									slider.noUiSlider.set(this.value);
    								});

    								slider.noUiSlider.on('change', function ( values, handle ) {
    									if ( values[handle] < 20 ) {
    										slider.noUiSlider.set(20);
    									} else if ( values[handle] > 80 ) {
    										slider.noUiSlider.set(80);
    									}
    								});
    							}

    							var demo6 = function() {
    								// init slider

    								var verticalSlider = document.getElementById('kt_nouislider_6');

    								noUiSlider.create(verticalSlider, {
    									start: 40,
    									orientation: 'vertical',
    									range: {
    										'min': 0,
    										'max': 100
    									}
    								});

    								// init slider input
    								var sliderورودی = document.getElementById('kt_nouislider_6_input');

    								verticalSlider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودی.value = values[handle];
    								});

    								sliderورودی.addرویدادلیستener('change', function(){
    									verticalSlider.noUiSlider.set(this.value);
    								});
    							}

    							// مودال demo

    							var modaldemo1 = function() {
    								var slider = document.getElementById('kt_nouislider_modal1');

    								noUiSlider.create(slider, {
    									start: [ 0 ],
    									step: 2,
    									range: {
    										'min': [ 0 ],
    										'max': [ 10 ]
    									},
    									format: wNumb({
    										decimals: 0
    									})
    								});

    								// init slider input
    								var sliderورودی = document.getElementById('kt_nouislider_modal1_input');

    								slider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودی.value = values[handle];
    								});

    								sliderورودی.addرویدادلیستener('change', function(){
    									slider.noUiSlider.set(this.value);
    								});
    							}

    							var modaldemo2 = function() {
    								var slider = document.getElementById('kt_nouislider_modal2');

    								noUiSlider.create(slider, {
    									start: [ 20000 ],
    									connect: [true, false],
    									step: 1000,
    									range: {
    										'min': [ 20000 ],
    										'max': [ 80000 ]
    									},
    									format: wNumb({
    										decimals: 3,
    										thousand: '.',
    										postfix: ' (US دلار)',
    									})
    								});

    								// init slider input
    								var sliderورودی = document.getElementById('kt_nouislider_modal2_input');

    								slider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودی.value = values[handle];
    								});

    								sliderورودی.addرویدادلیستener('change', function(){
    									slider.noUiSlider.set(this.value);
    								});
    							}

    							var modaldemo3 = function() {
    								var slider = document.getElementById('kt_nouislider_modal3');

    								noUiSlider.create(slider, {
    									start: [20, 80],
    									connect: true,
    									direction: 'rtl',
    									tooltips: [true, wNumb({ decimals: 1 })],
    									range: {
    										'min': [0],
    										'10%': [10, 10],
    										'50%': [80, 50],
    										'80%': 150,
    										'max': 200
    									}
    								});

    								// init slider input
    								var sliderورودی0 = document.getElementById('kt_nouislider_modal1.1_input');
    								var sliderورودی1 = document.getElementById('kt_nouislider_modal1.2_input');
    								var sliderورودیs = [sliderورودی1, sliderورودی0];

    								slider.noUiSlider.on('update', function( values, handle ) {
    									sliderورودیs[handle].value = values[handle];
    								});
    							}
    							return {
    								// public functions
    								init: function() {
    									demo1();
    									demo2();
    									demo3();
    									demo4();
    									demo5();
    									demo6();
    									modaldemo1();
    									modaldemo2();
    									modaldemo3();
    								}
    							};
    						}();

    						jQuery(document).ready(function() {
    							KTnoUiSliderنسخه ی نمایشیs.init();
    						});

نمونه پایه
اینپوت با کنترل اسلایدر
واحد پول
برای قالب بندی خروجی کشویی ، noUiSlider گزینه فرمت را ارائه می دهد.
با تولتیپ
برای نمایش مقادیر کشویی ، با راهنمایی های کشویی همراه شوید.
اسلایدر رنگی
برای تغییر مسیر اتصال نوار لغزنده و رنگ ها از کلاس های حالت استفاده کنید.
محدودیت های نرم
لبه های کشویی را که در آن هنگام انتقال آزاد می شود ، غیرفعال می کند
اسلایدر عمودی
اسلایدر عمودی
مودال
راه اندازی مودال

##### نمونه بوت استرپ

نمونه پایه
واحد پول
با تولتیپ

### پروفایل کاربر 12 پیام

محسن برومند
توسعه اپلیکیشن
jm@softplus.com خروج
پروفایل من
تنظیمات اکانت بروزرسانی
پیام های من
صندوق پیام ها و کارها
فعالیت های من
لاگ ها و اعلان ها
کارهای من
اخرین کارها و پروژه ها

##### آخرین اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%

#### سبد خرید

iBlender بهترین وسایل آشپزخانه در سال 2020
دلار 350 5
پاک کننده هوشمند ابزار هوشمند برای پخت و پز
650دلار 4
دوربین دوربین حرفه ای برای عکس
150دلار 3
چاپگر 4D ساخت اشیاء منحصر به فرد
دلار 1450 7
موشن ابزار انیمیشن ایده آل
650دلار 7

##### پیام های سیستم

نویسندگان برتر موفق ترین ها
+82دلار
نویسندگان محبوب موفق ترین ها
+280دلار
کاربران جدید موفق ترین ها
+4500دلار
فعال مشتریان موفق ترین ها
+4500دلار
تم پرفروش موفق ترین ها
+4500دلار

##### اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%
5 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
2 موارد جدید ارسال شد
توسط محمد رضایی
فایل های ایجاد شده
گزارش ها بر اساس فروش
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است
3 هشدارهای دفاعی
هفته گذشته 40٪ هشدار کمتری دارد
میانگین 4 پست وبلاگ برای هر نویسنده
12 بار ارسال شده است
هفته گذشته 16 نویسنده پیوستند
طراح
2 مورد جدید ارسال شده است
توسط محمد رضایی
حجم دانلودها 2 گیگ
مفاهیم بنیادی
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
7 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است

##### مراقبت از مشتری

فعال کردن اعلان ها:
فعال کردن ردیابی:
پرتال پشتیبانی

##### گزارشات

گزارش عمومیات:
فعال سازی خروچی گزارش
اجازه جمع آوری داده ها:

##### اعضا

فعال سازی عضویت اعضا
اجازه نظر دهی
فعال کردن پرتال مشتری
محسن برومند
فعال
محسن برومند 2 ساعت
چقدر احتمال دارید که شرکت ما را توصیه کنید به دوستان و خانواده خود؟
3 دقیقه شما
سلام در آنجا ، ما فقط می نویسیم تا به شما اطلاع دهیم که در مخزن گیت هاب مشترک شده اید.
محسن برومند 40 ثانیه
باشه ، فهمیدم
همین الان شما
برای همه مشکلات اعلان دریافت خواهید کرد ، درخواستها را بکشید!
محسن برومند 40 ثانیه
شما می توانید با کلیک بر روی این مخزن بلافاصله از حالت انتخاب خارج شوید:https://github.com
همین الان شما
آموزش رو دیدم.
محسن برومند 40 ثانیه
بیشترین دوره های تجاری خریداری شده در این فروش!
همین الان شما
شرکت BBQ برای جشن گرفتن دستاوردها و اهداف سه ماهه آخر. غذا و نوشیدنی تهیه شده

#### انتخاب نسخه ی نمایشی

##### نسخه ی نمایشی 1

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 2

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 3

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 4

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 5

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 6

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 7

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 8

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 9

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 10

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 11

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 12

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 13

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 14

به زودی

##### نسخه ی نمایشی 15

به زودی

##### نسخه ی نمایشی 16

به زودی

##### نسخه ی نمایشی 17

به زودی

##### نسخه ی نمایشی 18

به زودی

##### نسخه ی نمایشی 19

به زودی

##### نسخه ی نمایشی 20

به زودی

##### نسخه ی نمایشی 21

به زودی

##### نسخه ی نمایشی 22

به زودی

##### نسخه ی نمایشی 23

به زودی

##### نسخه ی نمایشی 24

به زودی

##### نسخه ی نمایشی 25

به زودی

##### نسخه ی نمایشی 26

به زودی

##### نسخه ی نمایشی 27

به زودی

##### نسخه ی نمایشی 28

به زودی

##### نسخه ی نمایشی 29

به زودی

##### نسخه ی نمایشی 30

به زودی