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.
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" />
Handles
You can create a slider with more than one handle using: start: [pointOne, pointTwo]
parameter.
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.
<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.
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 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
}
});