Documentation

Vue

Source & Credits

Upgrade Guide

Change Log

NoUiSlider

Use the required class varient (e.g. slider-secondary, slider-success, slider-warning, slider-danger, slider-dark ) for different background-color.

HTML Code

<div class="form-group">
    <div class="slider noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
        <div class="noUi-base">
            <div class="noUi-connects"></div>
            <div class="noUi-origin" style="transform: translate(-500%, 0px); z-index: 4;"></div>
        </div>
    </div>
</div>

Script


const rangeSlider = document.querySelectorAll('.range-slider');

Array.from(rangeSlider, (elem) => {
  noUiSlider.create(elem, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
  })
})

Range Slider

HTML Code

<div class="form-group">
    <div class="range-slider noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
        <div class="noUi-base">
            <div class="noUi-connects"></div>
            <div class="noUi-origin" style="transform: translate(-800%, 0px); z-index: 5;"></div>
            <div class="noUi-origin" style="transform: translate(-200%, 0px); z-index: 4;"></div>
        </div>
    </div>
</div>

Script


const slider = document.querySelectorAll('.slider');

Array.from(slider, (elem) => {
  noUiSlider.create(elem, {
    start: 50,
    connect: [true, false],
    range: {
        'min': 0,
        'max': 100
    }
  })
})