Logo
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 Pageor 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

Notifications 24 New

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

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

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

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

DB Migration

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

System Messages
09:30 AM

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

2:45 PM

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

3:12 PM

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

7:05 PM

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

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

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.

Select A Demo

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