Forms - Slider | Materio - Bootstrap Material Design Admin Template

Slider

We are using noUiSlider as slider component. noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

Read the official noUiSlider Documentation for a full list of instructions and other options.

Usage

In order to use noUiSlider on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/nouislider/nouislider.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

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

Examples

Default

You can create a basic slider using: noUiSlider.create(YOUR_ELEMENT)

<div id="slider-basic" class="my-4"></div>

noUiSlider.create(document.getElementById("slider-basic"), {
  start: [50],
  connect: [true, false],
  range: {
    min: 0,
    max: 100
  }
});

Handles

You can create a slider with more than one handle using: start: [pointOne, pointTwo] parameter.

<div id="slider-handles"></div>

noUiSlider.create(document.getElementById("slider-handles"), {
  start: [0, 50],
  step: 5,
  connect: true,
  range: {
    min: 0,
    max: 100
  },
  pips: {
    mode: "range",
    density: 5,
    stepped: true
  }
});

Snapping

Use snap: true parameter to snap between steps.

<div id="slider-steps" class="my-4"></div>

noUiSlider.create(document.getElementById("slider-steps"), {
  start: [0, 30],
  snap: true,
  connect: true,
  range: {
    min: 0,
    "10%": 10,
    "20%": 20,
    "30%": 30,
    "40%": 40,
    "50%": 50,
    max: 100
  }
});

Tap

Use behaviour: "tap" parameter for slider to move on tap.

<div id="slider-tap" class="my-4"></div>

noUiSlider.create(document.getElementById("slider-tap"), {
  start: [10, 30],
  behaviour: "tap",
  connect: true,
  range: {
    min: 10,
    max: 100
  }
});

Drag

Use behaviour: "drag" property to drag slider.

<div id="slider-drag" class="my-4"></div>

noUiSlider.create(document.getElementById("slider-drag"), {
  start: [40, 60],
  limit: 20,
  behaviour: "drag",
  connect: true,
  range: {
    min: 20,
    max: 80
  }
});

Fixed Drag

Use behaviour: "drag-fixed" property to create a slider with a fixed drag.

<div id="slider-fixed-drag" class="my-4"></div>

noUiSlider.create(document.getElementById("slider-fixed-drag"), {
  start: [40, 60],
  behaviour: "drag-fixed",
  connect: true,
  range: {
    min: 20,
    max: 80
  }
});

Combined

You can combine behaviour options like in the example below.

<div id="slider-combined-options" class="my-4"></div>

noUiSlider.create(document.getElementById("slider-combined-options"), {
  start: [40, 60],
  behaviour: "drag-tap",
  connect: true,
  range: {
    min: 20,
    max: 80
  }
});

Hover

With this option set, the slider fires hover events when hovers over the slider. The event is provided with the slider value at the hovered position. It does not fire while the slider is being dragged, but it does for touch events.

Hovered value: null

<div id="slider-hover" class="mb-2"></div>
<small>Hovered value: <span id="slider-val">null</span></small>

var hoverSlider = document.getElementById("slider-hover");

noUiSlider.create(hoverSlider, {
  start: 20,
  behaviour: "hover-snap-tap",
  range: {
    min: 0,
    max: 100
  }
});
hoverSlider.noUiSlider.on("hover", function(value) {
  document.getElementById("slider-val").innerHTML = value;
});

Scale & Pips

You can show scales and pips below your slider. Refer this example for more info.

<div id="slider-pips" class="my-3"></div>

noUiSlider.create(document.getElementById("slider-pips"), {
  start: [10],
  behaviour: "tap-drag",
  step: 10,
  tooltips: true,
  range: {
    min: 0,
    max: 100
  },
  pips: {
    mode: "steps",
    stepped: true,
    density: 5
  }
});

Dynamic

Your can also change slider values dynamically. Refer below mentioned example for more info.

<div class="mb-3" id="slider-dynamic"></div>
<div class="row">
  <div class="col-xl-3 col-md-4 col-sm-12 slider-select d-sm-flex d-block">
    <select class="form-select me-1 mt-2 d-inline-block" id="slider-select">
      <option value="-20">-20</option>
      <option value="-19">-19</option>
      <option value="-18">-18</option>
      <option value="-17">-17</option>
      <option value="-16">-16</option>
      <option value="-15">-15</option>
      <option value="-14">-14</option>
      <option value="-13">-13</option>
      <option value="-12">-12</option>
      <option value="-11">-11</option>
      <option value="-10">-10</option>
      <option value="-9">-9</option>
      <option value="-8">-8</option>
      <option value="-7">-7</option>
      <option value="-6">-6</option>
      <option value="-5">-5</option>
      <option value="-4">-4</option>
      <option value="-3">-3</option>
      <option value="-2">-2</option>
      <option value="-1">-1</option>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
      <option value="25">25</option>
      <option value="26">26</option>
      <option value="27">27</option>
      <option value="28">28</option>
      <option value="29">29</option>
      <option value="30">30</option>
      <option value="31">31</option>
      <option value="32">32</option>
      <option value="33">33</option>
      <option value="34">34</option>
      <option value="35">35</option>
      <option value="36">36</option>
      <option value="37">37</option>
      <option value="38">38</option>
      <option value="39">39</option>
      <option value="40">40</option>
    </select>
    <input class="form-control d-inline-block mt-2" type="number" min="-20" max="40" step="1" id="slider-input" />
  </div>
</div>

var dynamicSlider = document.getElementById("slider-dynamic"),
  sliderSelect = document.getElementById("slider-select"),
  sliderInput = document.getElementById("slider-input");

noUiSlider.create(dynamicSlider, {
  start: [10, 30],
  connect: true,
  range: {
    min: -20,
    max: 40
  }
});

dynamicSlider.noUiSlider.on("update", function(values, handle) {
  var value = values[handle];
  if (handle) {
    sliderInput.value = value;
  } else {
    sliderSelect.value = Math.round(value);
  }
});

for (var i = -20; i <= 40; i++) {
  var option = document.createElement("option");
  option.text = i;
  option.value = i;
  sliderSelect.appendChild(option);
}
sliderSelect.addEventListener("change", function() {
  dynamicSlider.noUiSlider.set([this.value, null]);
});

sliderInput.addEventListener("change", function() {
  dynamicSlider.noUiSlider.set([null, this.value]);
});

Colors

Use .noUi-{color} to create a colored slider.

Primary

Success

Danger

Warning

Info

<p>Primary</p>
<div class="noUi-primary" id="slider-primary"></div>
<p>Success</p>
<div class="noUi-success" id="slider-success"></div>
<p>Danger</p>
<div class="noUi-danger" id="slider-danger"></div>
<p>Warning</p>
<div class="noUi-warning" id="slider-warning"></div>
<p>Info</p>
<div class="noUi-info" id="slider-info"></div>

colorOptions = {
  start: [30, 50],
  connect: true,
  behaviour: 'tap-drag',
  step: 10,
  tooltips: true,
  range: {
    min: 0,
    max: 100
  },
  pips: {
    mode: 'steps',
    stepped: true,
    density: 5
  }
}

noUiSlider.create(document.getElementById("slider-primary"), colorOptions);
noUiSlider.create(document.getElementById("slider-success"), colorOptions);
noUiSlider.create(document.getElementById("slider-danger"), colorOptions);
noUiSlider.create(document.getElementById("slider-warning"), colorOptions);
noUiSlider.create(document.getElementById("slider-info"), colorOptions);

Class	Value
`class="noUi-{value}"`	primary \| secondary \| success \| danger \| warning \| info \| dark

Vertical

Use orientation: "vertical" parameter to create a vertical slider.

Basic

Connect Upper

Vertical Tooltip

Limit

<div class="row">
  <div class="col-xl-3 col-md-6 col-12 text-center">
    <p>Basic</p>
    <div class="mx-auto" id="slider-vertical"></div>
  </div>

  <div class="col-xl-3 col-md-6 col-12 text-center">
    <p>Connect Upper</p>
    <div class="mx-auto" id="slider-connect-upper"></div>
  </div>

  <div class="col-xl-3 col-md-6 col-12 text-center">
    <p>Vertical Tooltip</p>
    <div class="mx-auto" id="slider-vertical-tooltip"></div>
  </div>

  <div class="col-xl-3 col-md-6 col-12 text-center">
    <p>Limit</p>
    <div class="mx-auto" id="slider-vertical-limit"></div>
  </div>
</div>

// Basic Vertical
var defaultVertical = document.getElementById("slider-vertical");
defaultVertical.style.height = "200px";
noUiSlider.create(defaultVertical, {
  start: [40, 60],
  orientation: "vertical",
  behaviour: "drag",
  connect: true,
  range: {
    min: 0,
    max: 100
  }
});

// Connect Upper
var connectVertical = document.getElementById("slider-connect-upper");
connectVertical.style.height = "200px";
noUiSlider.create(connectVertical, {
  start: 40,
  orientation: "vertical",
  behaviour: "drag",
  connect: "upper",
  range: {
    min: 0,
    max: 100
  }
});

// Vertical Tooltip
var tooltipVertical = document.getElementById("slider-vertical-tooltip");
tooltipVertical.style.height = "200px";
noUiSlider.create(tooltipVertical, {
  start: 10,
  orientation: "vertical",
  behaviour: "drag",
  tooltips: true,
  range: {
    min: 0,
    max: 100
  }
});

// Limit
var limitVertical = document.getElementById("slider-vertical-limit");
limitVertical.style.height = "200px";
noUiSlider.create(limitVertical, {
  start: [0, 40],
  orientation: "vertical",
  behaviour: "drag",
  limit: 60,
  tooltips: true,
  connect: true,
  range: {
    min: 0,
    max: 100
  }
});