Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.
For more info please visit the plugin's Demo Page or Github Repo.

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

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9