Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Overview Official Website

noUiSlider is a lightweight JavaScript range slider.

Usage

noUiSlider's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.

Basic Range Slider#
                                                                 
                                                                      <div id="rangeslider_basic"></label>
                                                                 
                                                            
                                                                 
                                                                      var sliderColorScheme = document.querySelectorAll('#rangeslider_basic');
                                                                      if (sliderColorScheme)
                                                                           sliderColorScheme.forEach(function (slider) {
                                                                                noUiSlider.create(slider, {
                                                                                     start: 127,
                                                                                     connect: 'lower',
                                                                                     range: {
                                                                                          'min': 0,
                                                                                          'max': 255
                                                                                     },
                                                                                });
                                                                           });
                                                                 
                                                            
Vertical Range Slider#
                                                                 
                                                                      <div class="mb-3">
                                                                           <div id="rangeslider_vertical" style="height: 150px;"></div>
                                                                      </div>
                                                                 
                                                            
                                                                 
                                                                      var rangesliderVertical = document.querySelectorAll('#rangeslider_vertical');
                                                                      if (rangesliderVertical)
                                                                      rangesliderVertical.forEach(function (slider) {
                                                                           noUiSlider.create(slider, {
                                                                                start: [60, 160],
                                                                                connect: true,
                                                                                orientation: "vertical",
                                                                                range: {
                                                                                     "min": 0,
                                                                                     "max": 200
                                                                                }
                                                                           });
                                                                      });
                                                                 
                                                            
Multi Elements Range#
                                                                 
                                                                      <div class="mb-3">
                                                                           <div id="rangeslider_multielement"></div>
                                                                      </div>
                                                                 
                                                            
                                                                 
                                                                      var multielementslider = document.querySelectorAll('#rangeslider_multielement');
                                                                      if (multielementslider)
                                                                      multielementslider.forEach(function (slider) {
                                                                           noUiSlider.create(slider, {
                                                                                start: [20, 80],
                                                                                connect: true,
                                                                                range: {
                                                                                     'min': 0,
                                                                                     'max': 100
                                                                                }
                                                                           });
                                                                      });
                                                                 
                                                            
Colorpicker#
                                                                 
                                                                      <div class="mb-3">
                                                                      <div class="sliders" id="red"></div>
                                                                      <div class="sliders" id="green"></div>
                                                                      <div class="sliders" id="blue"></div>
                         
                                                                      <div id="result"></div>
                                                                 </div>
                                                                 
                                                            
                                                                 
                                                                      var resultElement = document.getElementById('result');
                                                                      var sliders = document.getElementsByClassName('sliders');
                                                                      var colors = [0, 0, 0];
                                                                      if (sliders)
                                                                      [].slice.call(sliders).forEach(function (slider, index) {

                                                                           noUiSlider.create(slider, {
                                                                                start: 127,
                                                                                connect: [true, false],
                                                                                orientation: "vertical",
                                                                                range: {
                                                                                     'min': 0,
                                                                                     'max': 255
                                                                                },
                                                                                format: wNumb({
                                                                                     decimals: 0
                                                                                })
                                                                           });

                                                                           // Bind the color changing function to the update event.
                                                                           slider.noUiSlider.on('update', function () {

                                                                                colors[index] = slider.noUiSlider.get();

                                                                                var color = 'rgb(' + colors.join(',') + ')';

                                                                                resultElement.style.background = color;
                                                                                resultElement.style.color = color;
                                                                           });
                                                                      });

                                                                 
                                                            
Value Range Slider#
                                                                 
                                                                      <div class="mb-3">
                                                                      <div id="nonlinear"></div>
                                                                      <div class="d-flex justify-content-between">
                                                                           <div class="example-val" id="lower-value"></div>
                                                                           <div class="example-val" id="upper-value"></div>
                                                                      </div>
                                                                 </div>
                                                                 
                                                            
                                                                 
                                                                      var nonLinearSlider = document.getElementById('nonlinear');
                                                                      if (nonLinearSlider)
                                                                           noUiSlider.create(nonLinearSlider, {
                                                                                connect: true,
                                                                                behaviour: 'tap',
                                                                                start: [500, 4000],
                                                                                range: {
                                                                                     // Starting at 500, step the value by 500,
                                                                                     // until 4000 is reached. From there, step by 1000.
                                                                                     'min': [0],
                                                                                     '10%': [500, 500],
                                                                                     '50%': [4000, 1000],
                                                                                     'max': [10000]
                                                                                }
                                                                           });
                                                                      
                                                                      var nodes = [
                                                                           document.getElementById('lower-value'), // 0
                                                                           document.getElementById('upper-value') // 1
                                                                      ];
                                                                      
                                                                      // Display the slider value and how far the handle moved
                                                                      // from the left edge of the slider.
                                                                      nonLinearSlider.noUiSlider.on('update', function (values, handle, unencoded, isTap, positions) {
                                                                           nodes[handle].innerHTML = values[handle] + ', ' + positions[handle].toFixed(2) + '%';
                                                                      });
                                                                 
                                                            
Locking Sliders Together#
                                                                 
                                                                      <div class="mb-3">
                                                                           <div class="slider" id="slider1"></div>
                                                                           <span class="example-val mt-2" id="slider1-span"></span>

                                                                           <div class="slider" id="slider2"></div>
                                                                           <span class="example-val mt-2" id="slider2-span"></span>

                                                                           <button id="lockbutton" class="btn btn-primary">Lock</button>
                                                                      </div>
                                                                 
                                                            
                                                                 
                                                                      var lockedState = false;
                                                                      var lockedSlider = false;
                                                                      var lockedValues = [60, 80];

                                                                      var slider1 = document.getElementById('slider1');
                                                                      var slider2 = document.getElementById('slider2');

                                                                      var lockButton = document.getElementById('lockbutton');
                                                                      var slider1Value = document.getElementById('slider1-span');
                                                                      var slider2Value = document.getElementById('slider2-span');

                                                                      // When the button is clicked, the locked state is inverted.
                                                                      if (lockButton)
                                                                      lockButton.addEventListener('click', function () {
                                                                           lockedState = !lockedState;
                                                                           this.textContent = lockedState ? 'unlock' : 'lock';
                                                                      });

                                                                      function crossUpdate(value, slider) {

                                                                      // If the sliders aren't interlocked, don't
                                                                      // cross-update.
                                                                      if (!lockedState) return;

                                                                      // Select whether to increase or decrease
                                                                      // the other slider value.
                                                                      var a = slider1 === slider ? 0 : 1;

                                                                      // Invert a
                                                                      var b = a ? 0 : 1;

                                                                      // Offset the slider value.
                                                                      value -= lockedValues[b] - lockedValues[a];

                                                                      // Set the value
                                                                      slider.noUiSlider.set(value);
                                                                      }

                                                                      noUiSlider.create(slider1, {
                                                                      start: 60,

                                                                      // Disable animation on value-setting,
                                                                      // so the sliders respond immediately.
                                                                      animate: false,
                                                                      range: {
                                                                           min: 50,
                                                                           max: 100
                                                                      }
                                                                      });

                                                                      noUiSlider.create(slider2, {
                                                                      start: 80,
                                                                      animate: false,
                                                                      range: {
                                                                           min: 50,
                                                                           max: 100
                                                                      }
                                                                      });

                                                                      if (slider1 && slider2) {
                                                                      slider1.noUiSlider.on('update', function (values, handle) {
                                                                           slider1Value.innerHTML = values[handle];
                                                                      });
                                                                      slider2.noUiSlider.on('update', function (values, handle) {
                                                                           slider2Value.innerHTML = values[handle];
                                                                      });


                                                                      function setLockedValues() {
                                                                           lockedValues = [
                                                                                Number(slider1.noUiSlider.get()),
                                                                                Number(slider2.noUiSlider.get())
                                                                           ];
                                                                      }

                                                                      slider1.noUiSlider.on('change', setLockedValues);
                                                                      slider2.noUiSlider.on('change', setLockedValues);

                                                                      slider1.noUiSlider.on('slide', function (values, handle) {
                                                                           crossUpdate(values[handle], slider2);
                                                                      });

                                                                      slider2.noUiSlider.on('slide', function (values, handle) {
                                                                           crossUpdate(values[handle], slider1);
                                                                      });
                                                                      }

                                                                 
                                                            
Tooltip#
                                                                 
                                                                      <div class="slider" id="slider-merging-tooltips"></div>
                                                                 
                                                            
                                                                 
                                                                      var mergingTooltipSlider = document.getElementById('slider-merging-tooltips');
                                                                      if (mergingTooltipSlider) {
                                                                      noUiSlider.create(mergingTooltipSlider, {
                                                                           start: [20, 75],
                                                                           connect: true,
                                                                           tooltips: [true, true],
                                                                           range: {
                                                                                'min': 0,
                                                                                'max': 100
                                                                           }
                                                                      });

                                                                      mergeTooltips(mergingTooltipSlider, 5, ' - ');
                                                                      }

                                                                      /**
                                                                      * @param slider HtmlElement with an initialized slider
                                                                      * @param threshold Minimum proximity (in percentages) to merge tooltips
                                                                      * @param separator String joining tooltips
                                                                      */
                                                                      function mergeTooltips(slider, threshold, separator) {

                                                                      var textIsRtl = getComputedStyle(slider).direction === 'rtl';
                                                                      var isRtl = slider.noUiSlider.options.direction === 'rtl';
                                                                      var isVertical = slider.noUiSlider.options.orientation === 'vertical';
                                                                      var tooltips = slider.noUiSlider.getTooltips();
                                                                      var origins = slider.noUiSlider.getOrigins();

                                                                      // Move tooltips into the origin element. The default stylesheet handles this.
                                                                      tooltips.forEach(function (tooltip, index) {
                                                                           if (tooltip) {
                                                                                origins[index].appendChild(tooltip);
                                                                           }
                                                                      });
                                                                      if (slider)
                                                                           slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {

                                                                                var pools = [
                                                                                     []
                                                                                ];
                                                                                var poolPositions = [
                                                                                     []
                                                                                ];
                                                                                var poolValues = [
                                                                                     []
                                                                                ];
                                                                                var atPool = 0;

                                                                                // Assign the first tooltip to the first pool, if the tooltip is configured
                                                                                if (tooltips[0]) {
                                                                                     pools[0][0] = 0;
                                                                                     poolPositions[0][0] = positions[0];
                                                                                     poolValues[0][0] = values[0];
                                                                                }

                                                                                for (var i = 1; i < positions.length; i++) {
                                                                                     if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) {
                                                                                          atPool++;
                                                                                          pools[atPool] = [];
                                                                                          poolValues[atPool] = [];
                                                                                          poolPositions[atPool] = [];
                                                                                     }

                                                                                     if (tooltips[i]) {
                                                                                          pools[atPool].push(i);
                                                                                          poolValues[atPool].push(values[i]);
                                                                                          poolPositions[atPool].push(positions[i]);
                                                                                     }
                                                                                }

                                                                                pools.forEach(function (pool, poolIndex) {
                                                                                     var handlesInPool = pool.length;

                                                                                     for (var j = 0; j < handlesInPool; j++) {
                                                                                          var handleNumber = pool[j];

                                                                                          if (j === handlesInPool - 1) {
                                                                                          var offset = 0;

                                                                                          poolPositions[poolIndex].forEach(function (value) {
                                                                                               offset += 1000 - value;
                                                                                          });

                                                                                          var direction = isVertical ? 'bottom' : 'right';
                                                                                          var last = isRtl ? 0 : handlesInPool - 1;
                                                                                          var lastOffset = 1000 - poolPositions[poolIndex][last];
                                                                                          offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;

                                                                                          // Center this tooltip over the affected handles
                                                                                          tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
                                                                                          tooltips[handleNumber].style.display = 'block';
                                                                                          tooltips[handleNumber].style[direction] = offset + '%';
                                                                                          } else {
                                                                                          // Hide this tooltip
                                                                                          tooltips[handleNumber].style.display = 'none';
                                                                                          }
                                                                                     }
                                                                                });
                                                                           });
                                                                      }

                                                                 
                                                            
Soft Limits #
                                                                 
                                                                      <div  class="slider" id="soft"></label>
                                                                 
                                                            
                                                                 
                                                                      var softSlider = document.getElementById('soft');
                                                                      if (softSlider) {
                                                                      noUiSlider.create(softSlider, {
                                                                           start: 50,
                                                                           range: {
                                                                                min: 0,
                                                                                max: 100
                                                                           },
                                                                           pips: {
                                                                                mode: 'values',
                                                                                values: [20, 80],
                                                                                density: 4
                                                                           }
                                                                      });

                                                                      softSlider.noUiSlider.on('change', function (values, handle) {
                                                                           if (values[handle] < 20) {
                                                                                softSlider.noUiSlider.set(20);
                                                                           } else if (values[handle] > 80) {
                                                                                softSlider.noUiSlider.set(80);
                                                                           }
                                                                      });
                                                                      }
                                                                 
                                                            
© Larkon. Crafted by Techzaa