# Bootstrap Sliders

-
Pro Component

Our Bootstrap Sliders (customised noUiSlider) refers to a lightweight JavaScript range slider library. The slider offers a wide selection of options and settings and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.
Keep reading our Bootstrap Sliders examples and learn how to use this plugin.

## Usage

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

Copy

    <script src="/assets/vendor/nouislider/js/nouislider.min.js"></script>

## Initialization

Simply copy one of the code examples demonstrated below and include it in your page. Afterwards, you can modify the slider’s values with the ones you need.

## Examples

### Slider

    <!-- Simple slider -->
    <div id="sliderDouble"></div>

### Range slider

    <!-- Range slider container -->
    <div id="sliderDouble"></div>

## Round sliders

## Usage

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

    <script src="../../assets/js/plugins/round-slider.min.js"></script>

## Example

###### Device limit

#### 21°C

16°C Temperature 38°C

Copy

    <div class="card card-plain">
      <div class="card-body text-center p-3">
        <h6 class="text-start">Device limit</h6>
        <round-slider value="21" valueLabel="Temperature"></round-slider>
        <h4 class="font-weight-bold mt-n7"><span class="text-dark" id="value">21</span><span class="text-body">°C</span></h4>
        <p class="ps-1 mt-5 mb-0"><span class="text-xs">16°C</span><span class="px-3">Temperature</span><span class="text-xs">38°C</span></p>
      </div>
    </div>

Copy

    <script>
        // Rounded slider
        const setValue = function(value, active) {
          document.querySelectorAll("round-slider").forEach(function(el) {
            if (el.value === undefined) return;
            el.value = value;
          });
          const span = document.querySelector("#value");
          span.innerHTML = value;
          if (active)
            span.style.color = 'red';
          else
            span.style.color = 'black';
        }

        document.querySelectorAll("round-slider").forEach(function(el) {
          el.addEventListener('value-changed', function(ev) {
            if (ev.detail.value !== undefined)
              setValue(ev.detail.value, false);
            else if (ev.detail.low !== undefined)
              setLow(ev.detail.low, false);
            else if (ev.detail.high !== undefined)
              setHigh(ev.detail.high, false);
          });

          el.addEventListener('value-changing', function(ev) {
            if (ev.detail.value !== undefined)
              setValue(ev.detail.value, true);
            else if (ev.detail.low !== undefined)
              setLow(ev.detail.low, true);
            else if (ev.detail.high !== undefined)
              setHigh(ev.detail.high, true);
          });
        });
    </script>