Logo

Bootstrap noUiSlider Examples

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

       <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();
      });
      

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30