How to initialize the nouislider only once? noUISlider — `Uncaught Error: Slider was already initialized`

Question

我正在尝试使用 nouislider 创建范围滑块。我将使用输入字段获取最小值和最大值。单击创建按钮时，将创建一个范围滑块。

function create_range()
{

      const slider = document.getElementById('sliderPrice');

      const min_val  = document.getElementById('min').value ;
      const max_val  = document.getElementById('max').value;
      const step      = 5; // to move in 5 steps

      const filterInputs = document.querySelectorAll('input.filter__input');

      // slider.noUiSlider.reset();

      var rangeMin = parseInt(min_val);
      var rangeMax = parseInt(max_val);


       noUiSlider.create(slider, {
         start: [rangeMin, rangeMax],
         connect: true,
         // step: step, // if removed it will be in range ,smooth drag
         range: {
             'min': rangeMin,
             'max': rangeMax
         },
        
        pips: {
          mode: 'count',
          values: 5 // to split the pips
        },
        // make numbers whole
         format: {
           to: value => value,
           from: value => value
         }
      });



       // bind inputs with noUiSlider 
       slider.noUiSlider.on('update', (values, handle) => { 
         var intvalue = Math.ceil( values[handle] ); //Round a number upward to its nearest integer:
         filterInputs[handle].value = values[handle];
          // slider.noUiSlider.reset(); 
       });


       filterInputs.forEach((input, indexInput) => { 
         input.addEventListener('change', () => {
           slider.noUiSlider.setHandle(indexInput, input.value);
         })
       });

                 // slider. noUiSlider. destroy();



     
}

/*! nouislider - 14.6.0 - 6/27/2020 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
.noUi-connect {
  height: 100%;
  width: 100%;
}
.noUi-origin {
  height: 10%;
  width: 10%;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  top: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #3FB8AF;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 80%);
  transform: translate(-50%, 80%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
  top: 1%;  /* jas*/
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
  top: 1%;/* jas*/
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}


/*  other styles */
 *, *:before, *:after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   outline: none;
 }


 /* custom styles for UiSlider */
 .noUi-target {
   cursor: pointer;
 }
 .noUi-target :focus {
   outline: none;
 }

 .noUi-horizontal {
   height: 9px;
 }

 .noUi-connect {
   background: #9b26af;
 }

 .noUi-base {
   background: #DEDEDE;
 }

 .noUi-horizontal .noUi-handle {
   top: -6px;
   /*right: -15px;*/
   right: -12px;
   width: 22px;
   height: 22px;
   background: #9b26af;
   border: 2px solid #711fab;
   border-radius: 50%;
   box-shadow: unset;
   cursor: pointer;
   transition: transform 0.1s;
 }
 .noUi-horizontal .noUi-handle:before, .noUi-horizontal .noUi-handle:after {
   content: none;
 }
 .noUi-horizontal .noUi-handle:hover {
   transform: scale(1.1);
 }

 /* styles for filter */
 .filter {

  width: 500px;
  margin: 0 auto;
  /*border: 1px solid red;*/
   /*display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   max-width: 370px;
   border-radius: 10px;
   background: white;
   box-shadow: 0px 0px 50px 4px rgba(0, 0, 0, 0.75);
   padding: 20px;*/
 }

 .filter__label {
   position: relative;
   cursor: pointer;
 }
 .filter__label:before {
   position: absolute;
   left: 8px;
   top: 50%;
   transform: translateY(-50%);
   color: #999999;
   font-size: 14px;
 }
 .filter__label:nth-child(1):before {
   content: "from";
 }
 .filter__label:nth-child(2):before {
   content: "to";
 }

 .filter__input {
   height: 35px;
   border: 2px solid #711fab;
   border-radius: 5px;
   padding: 0 10px 0 40px;
   cursor: pointer;
   max-width: 160px;
 }
 .filter__input:focus {
   background: rgba(155, 38, 175, 0.2);
 }

 .filter__slider-price {
   width: 100%;
    margin: 20px 0;
    margin-bottom: 75px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.0/nouislider.js"></script>
<div class="container">

        min:
        <input  type="text" id="min" name="product" value="">

        max:
        <input  type="text" id="max" name="product" value="">

        <input type="button" value="create range" onclick="create_range()">
    </div>

   

      <div class="filter">

          

         <div id="sliderPrice" class="filter__slider-price" data-min="0" data-max="100" data-step="5"></div>

          <label class="filter__label">
            <input type="text" class="filter__input" id="min_val">
          </label>  

          <label class="filter__label">
            <input type="text" class="filter__input" id="max_val">
          </label>
          
      </div>

下次我的时候更改输入字段值并单击创建按钮，它显示错误为“noUiSlider (14.6.0): Slider was already initialized.”

如何初始化nouislider once.Or如何重置nouislider？

Answer 1

目前您无法重新初始化现有滑块。但是您绝对可以破坏滑块并创建一个新滑块。您需要添加一个检查滑块对象是否存在，基于该对象销毁现有对象然后创建一个新对象。

JS 代码如下所示。

let slider;

function destroyExistingSlider(){
  if(slider && slider.noUiSlider){
    slider.noUiSlider.destroy();
  }
}

function create_range()
{
  destroyExistingSlider();
  slider = document.getElementById('sliderPrice');
  const min_val  = document.getElementById('min').value ;
  const max_val  = document.getElementById('max').value;
  const step      = 5; // to move in 5 steps

  const filterInputs = document.querySelectorAll('input.filter__input');

  // slider.noUiSlider.reset();

  var rangeMin = parseInt(min_val);
  var rangeMax = parseInt(max_val);

    noUiSlider.create(slider, {
     start: [rangeMin, rangeMax],
     connect: true,
     // step: step, // if removed it will be in range ,smooth drag
     range: {
         'min': rangeMin,
         'max': rangeMax
     },
    
    pips: {
      mode: 'count',
      values: 5 // to split the pips
    },
    // make numbers whole
     format: {
       to: value => value,
       from: value => value
     }
  });
   

   // bind inputs with noUiSlider 
   slider.noUiSlider.on('update', (values, handle) => { 
     var intvalue = Math.ceil( values[handle] ); //Round a number upward to its nearest integer:
     filterInputs[handle].value = values[handle];
      // slider.noUiSlider.reset(); 
   });

   filterInputs.forEach((input, indexInput) => { 
     input.addEventListener('change', () => {
       slider.noUiSlider.setHandle(indexInput, input.value);
     })
   });

}

How to initialize the nouislider only once? noUISlider — `Uncaught Error: Slider was already initialized`

How to initialize the nouislider only once? noUISlider — `Uncaught Error: Slider was already initialized`

javascript

html

css

nouislider