NoUiSlider
Basic Example #
noUiSlider requires manual initialization via javascript. Use
stroyka.nouislider.create
instead of
noUiSlider.create
.
<div id="example/nouislider-1"></div>
<script>
window.addEventListener("load", function () {
var slider = document.getElementById("example/nouislider-1");
stroyka.nouislider.create(slider, {
start: [25, 75],
connect: true,
range: {
min: 0,
max: 100,
},
});
});
</script>
With inputs #
Connect the slider to the inputs.
<div id="example/nouislider-2"></div>
<div class="d-flex align-items-center mt-4">
<input
type="number"
class="form-control form-control-sm"
id="example/nouislider-2/input-from"
/>
<div class="sa-dash flex-shrink-0 mx-3"></div>
<input
type="number"
class="form-control form-control-sm"
id="example/nouislider-2/input-to"
/>
</div>
<script>
window.addEventListener("load", function () {
var slider = document.getElementById("example/nouislider-2");
stroyka.nouislider.create(slider, {
start: [25, 75],
connect: true,
range: {
min: 0,
max: 100,
},
});
const inputs = [
document.getElementById("example/nouislider-2/input-from"),
document.getElementById("example/nouislider-2/input-to"),
];
slider.noUiSlider.on("update", function (values, handle) {
inputs[handle].value = values[handle];
});
const readValue = function () {
const value = inputs.map(function (input) {
return parseFloat(input.value);
});
slider.noUiSlider.set(value);
};
inputs.forEach(function (input) {
input.addEventListener("change", function () {
readValue();
});
});
});
</script>
Tooltips #
To display tooltips, pass the
tooltips
option with a
true
value.
<div id="example/nouislider-3"></div>
<script>
window.addEventListener("load", function () {
var slider = document.getElementById("example/nouislider-3");
stroyka.nouislider.create(slider, {
start: [25, 75],
connect: true,
tooltips: true,
range: {
min: 0,
max: 100,
},
});
});
</script>
Ruler #
Use
pips
option to show ruler.
<div id="example/nouislider-4"></div>
<script>
window.addEventListener("load", function () {
var slider = document.getElementById("example/nouislider-4");
stroyka.nouislider.create(slider, {
start: [25, 75],
connect: true,
tooltips: true,
range: {
min: 0,
max: 100,
},
pips: {
mode: "count",
values: 5,
density: 2,
},
});
});
</script>
Stepping #
The amount the slider changes on movement can be set using the
step
option.
<div id="example/nouislider-5"></div>
<script>
window.addEventListener("load", function () {
var slider = document.getElementById("example/nouislider-5");
stroyka.nouislider.create(slider, {
start: [25, 75],
step: 25,
connect: true,
tooltips: true,
range: {
min: 0,
max: 100,
},
pips: {
mode: "steps",
density: 2,
stepped: true,
},
});
});
</script>
Vertical #
Set the
orientation
option to
vertical
value.
<div id="example/nouislider-6"></div>
<script>
window.addEventListener("load", function () {
var slider = document.getElementById("example/nouislider-6");
slider.style.height = "318px";
stroyka.nouislider.create(slider, {
start: [25, 75],
connect: true,
tooltips: true,
orientation: "vertical",
range: {
min: 0,
max: 100,
},
pips: {
mode: "count",
values: 5,
density: 2,
},
});
});
</script>