### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# NoUI Slider

### Horizontal Slider

Huro feature NoUI Slider, a powerful and versatile vanilla js range slider library, with orientation and multiple handle support. NoUI sliders can have 3 sizes, the default and 2 smaller ones. Check the code example for more details about usage.You can check the plugin documentation here. You can also access the javascript code by visiting the `assets/js/popover.js` file.

          //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
                  },
              });
          }

### Vertical Slider

NoUI Sliders can be vertically oriented if you need them to. Simply use the `orientation: "vertical"` option when initializing your slider. Vertical sliders have the same sizing options as horizontal sliders.

          //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
                  },
              });
          }

### Single Range

NoUI Slider can be used to create single handle range inputs. Check out the code example to learn more about the required markup and Javascript.

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

### Fill Colors

NoUI Sliders can have different fill colors. To use different fill colors, simply add the corresponding class to the main parent element. Available color classes are `is-info`, `is-success`, `is-warning` and `is-danger`. Check out the code example to learn more about the required markup and Javascript.

          //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
                  },
              });
          }

### Rounded Handles

NoUI Sliders can have rounded handles. To use rounded handles, simply added the `is-rounded` class to the main parent element. Check out the code example to learn more about the required markup and Javascript.

          //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
                  },
              });
          }

### Slider Tooltips

NoUI Sliders can have tooltips to display the currently selected value. If you want your tooltip to be shown permanently instead of on slide, simply add the `has-fixed-tooltip` to the main parent element. Check out the code example to learn more about the required markup and Javascript.

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