Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.

Bootstrap noUiSlider Examples


							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Bootstrap noUiSlider Examples
									</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">Basic Setup</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">Input control is attached to slider</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">Currency Formatting</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="Currency"/>
													</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">Slider With Tooltip</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">Slider with tooltips to show slider values.</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">Slider State Colors</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">Use state classes to change the slider's connect path and handle colors.</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">Soft Limits</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">Disables the edges of slider where handler bounces back when released</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">Vertical Slider</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">Vertical orientation slider example</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">Modal Demos</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">Launch modal examples</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">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>
								<!--end::Form-->
							</div>
						

						// Class definition
						var KTnoUiSliderDemos = function() {

							// Private 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 sliderInput = document.getElementById('kt_nouislider_1_input');

								slider.noUiSlider.on('update', function( values, handle ) {
									sliderInput.value = values[handle];
								});

								sliderInput.addEventListener('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 sliderInput = document.getElementById('kt_nouislider_2_input');

								slider.noUiSlider.on('update', function( values, handle ) {
									sliderInput.value = values[handle];
								});

								sliderInput.addEventListener('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 sliderInput0 = document.getElementById('kt_nouislider_3_input');
								var sliderInput1 = document.getElementById('kt_nouislider_3.1_input');
								var sliderInputs = [sliderInput1, sliderInput0];

								slider.noUiSlider.on('update', function( values, handle ) {
									sliderInputs[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 inputNumber = document.getElementById('kt_nouislider_input_number');

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

									var value = values[handle];

									if ( handle ) {
										inputNumber.value = value;
									} else {
										slider.value = Math.round(value);
									}
								});

								slider.addEventListener('change', function(){
									html5Slider.noUiSlider.set([this.value, null]);
								});

								inputNumber.addEventListener('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 sliderInput = document.getElementById('kt_nouislider_5_input');

								slider.noUiSlider.on('update', function( values, handle ) {
									sliderInput.value = values[handle];
								});

								sliderInput.addEventListener('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 sliderInput = document.getElementById('kt_nouislider_6_input');

								verticalSlider.noUiSlider.on('update', function( values, handle ) {
									sliderInput.value = values[handle];
								});

								sliderInput.addEventListener('change', function(){
									verticalSlider.noUiSlider.set(this.value);
								});
							}

							// Modal 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 sliderInput = document.getElementById('kt_nouislider_modal1_input');

								slider.noUiSlider.on('update', function( values, handle ) {
									sliderInput.value = values[handle];
								});

								sliderInput.addEventListener('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 sliderInput = document.getElementById('kt_nouislider_modal2_input');

								slider.noUiSlider.on('update', function( values, handle ) {
									sliderInput.value = values[handle];
								});

								sliderInput.addEventListener('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 sliderInput0 = document.getElementById('kt_nouislider_modal1.1_input');
								var sliderInput1 = document.getElementById('kt_nouislider_modal1.2_input');
								var sliderInputs = [sliderInput1, sliderInput0];

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

						jQuery(document).ready(function() {
							KTnoUiSliderDemos.init();
						});
						
Input control is attached to slider
To format the slider output, noUiSlider offers a format option.
Slider with tooltips to show slider values.
Use state classes to change the slider's connect path and handle colors.
Disables the edges of slider where handler bounces back when released
Vertical orientation slider example

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo