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 گزینه فرمت را ارائه می دهد.
برای نمایش مقادیر کشویی ، با راهنمایی های کشویی همراه شوید.
برای تغییر مسیر اتصال نوار لغزنده و رنگ ها از کلاس های حالت استفاده کنید.
لبه های کشویی را که در آن هنگام انتقال آزاد می شود ، غیرفعال می کند
اسلایدر عمودی

اعلان ها 24 جدید

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

آخرین اعلان ها
اهداف دیگر موعد 2 روز
+28%
+50%
بهترین محصول موعد 2 روز
+8%
پیام های سیستم
نویسندگان برتر موفق ترین ها
+82دلار
نویسندگان محبوب موفق ترین ها
+280دلار
کاربران جدید موفق ترین ها
+4500دلار
فعال مشتریان موفق ترین ها
+4500دلار
تم پرفروش موفق ترین ها
+4500دلار
اعلان ها
اهداف دیگر موعد 2 روز
+28%
+50%
بهترین محصول موعد 2 روز
+8%
مراقبت از مشتری
گزارشات
اعضا

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

نسخه ی نمایشی 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