اسلایدر بدون طرح

      //Markup
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-tiny"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-small"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider"></div>
          </div>
      </div>
      
      //Javascript
      var sliders = document.getElementsByClassName('noui-base-slider');
      
      for (var i = 0; i < sliders.length; i++) {
      
          noUiSlider.create(sliders[i], {
              start: [10, 90],
              connect: true,
              orientation: "horizontal",
              range: {
                  'min': 0,
                  'max': 100
              },
          });
      }
      

      //Markup
      <div class="field is-grouped">
          <div class="control">
              <div class="noui-vertical-slider is-tiny"></div>
          </div>
      
          <div class="control p-t-30 p-r-30"></div>
      
          <div class="control">
              <div class="noui-vertical-slider is-small"></div>
          </div>
      
          <div class="control p-t-30 p-r-30"></div>
      
          <div class="control">
              <div class="noui-vertical-slider"></div>
          </div>
      </div>
      
      //Javascript
      var sliders = document.getElementsByClassName('noui-vertical-slider');
      
      for (var i = 0; i < sliders.length; i++) {
      
          noUiSlider.create(sliders[i], {
              start: [10, 90],
              connect: true,
              orientation: "vertical",
              range: {
                  'min': 0,
                  'max': 100
              },
          });
      }
      

      //Markup
      <div class="field">
          <div class="control">
              <div id="noui-range-slider" class="is-small"></div>
          </div>
      </div>
      
      //Javascript
      var sliderRange = document.getElementById('noui-range-slider');
      
      noUiSlider.create(sliderRange, {
          start: [20],
          connect: [true, false],
          range: {
              'min': 0,
              'max': 100
          }
      });
      

      //Markup
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-small"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-info is-small"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-success is-small"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-warning is-small"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-danger is-small"></div>
          </div>
      </div>
      
      //Javascript
      var sliders = document.getElementsByClassName('noui-base-slider');
      
      for (var i = 0; i < sliders.length; i++) {
      
          noUiSlider.create(sliders[i], {
              start: [10, 90],
              connect: true,
              orientation: "horizontal",
              range: {
                  'min': 0,
                  'max': 100
              },
          });
      }
      

      //Markup
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-small is-rounded"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-info is-small is-rounded"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-success is-small is-rounded"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-warning is-small is-rounded"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-danger is-small is-rounded"></div>
          </div>
      </div>
      
      //Javascript
      var sliders = document.getElementsByClassName('noui-base-slider');
      
      for (var i = 0; i < sliders.length; i++) {
      
          noUiSlider.create(sliders[i], {
              start: [10, 90],
              connect: true,
              orientation: "horizontal",
              range: {
                  'min': 0,
                  'max': 100
              },
          });
      }
      

      //Markup
      <div class="field">
          <div class="control">
              <div class="noui-tooltip-slider is-small has-fixed-tooltip"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-info is-small is-rounded"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-success is-small is-rounded"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-warning is-small is-rounded"></div>
          </div>
      </div>
      
      <div class="field">
          <div class="control">
              <div class="noui-base-slider is-danger is-small is-rounded"></div>
          </div>
      </div>
      
      //Javascript
      var tooltipSliders = document.getElementsByClassName('noui-tooltip-slider');
      
      for (var i = 0; i < tooltipSliders.length; i++) {
      
          var randomStart = (Math.floor(Math.random() * 101));
      
          noUiSlider.create(tooltipSliders[i], {
              start: [randomStart],
              connect: [true, false],
              tooltips: [true],
              range: {
                  'min': 0,
                  'max': 100
              }
          });
      }