Forms - Slider | Materialize - Material Design HTML 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"></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.

100

<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"></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"></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"></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"></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"></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.

100

<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

100

Success

100

Danger

100

Warning

100

Info

100

<p>Primary</p>
<div class="noUi-primary my-6" id="slider-primary"></div>
<p class="mt-5">Success</p>
<div class="noUi-success my-6" id="slider-success"></div>
<p class="mt-5">Danger</p>
<div class="noUi-danger my-6" id="slider-danger"></div>
<p class="mt-5">Warning</p>
<div class="noUi-warning my-6" id="slider-warning"></div>
<p class="mt-5">Info</p>
<div class="noUi-info my-6" 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
  }
});