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

Copy

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

Range slider

Copy

<!-- 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:

Copy

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

Example

Device limit

21°C

16°CTemperature38°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>