Horizontal Slider
Huro feature NoUI Slider, a powerful and versatile vanilla js
range slider library, with orientation and multiple handle
support. NoUI sliders can have 3 sizes, the default and 2
smaller ones. Check the code example for more details about
usage.You can check the plugin documentation
here. You
can also access the javascript code by visiting the
assets/js/popover.js file.
//Markup
<div class="field">
<div class="control">
<div class="noui-base-slider is-tiny"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-small"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider"></div>
</div>
</div>
//Javascript
var sliders = document.getElementsByClassName('noui-base-slider');
for (var i = 0; i < sliders.length; i++) {
noUiSlider.create(sliders[i], {
start: [10, 90],
connect: true,
orientation: "horizontal",
range: {
'min': 0,
'max': 100
},
});
}
Vertical Slider
NoUI Sliders can be vertically oriented if you need them to.
Simply use the orientation: "vertical" option
when initializing your slider. Vertical sliders have the same
sizing options as horizontal sliders.
//Markup
<div class="field is-grouped">
<div class="control">
<div class="noui-vertical-slider is-tiny"></div>
</div>
<div class="control p-t-30 p-r-30"></div>
<div class="control">
<div class="noui-vertical-slider is-small"></div>
</div>
<div class="control p-t-30 p-r-30"></div>
<div class="control">
<div class="noui-vertical-slider"></div>
</div>
</div>
//Javascript
var sliders = document.getElementsByClassName('noui-vertical-slider');
for (var i = 0; i < sliders.length; i++) {
noUiSlider.create(sliders[i], {
start: [10, 90],
connect: true,
orientation: "vertical",
range: {
'min': 0,
'max': 100
},
});
}
Single Range
NoUI Slider can be used to create single handle range inputs. Check out the code example to learn more about the required markup and Javascript.
//Markup
<div class="field">
<div class="control">
<div id="noui-range-slider" class="is-small"></div>
</div>
</div>
//Javascript
var sliderRange = document.getElementById('noui-range-slider');
noUiSlider.create(sliderRange, {
start: [20],
connect: [true, false],
range: {
'min': 0,
'max': 100
}
});
Fill Colors
NoUI Sliders can have different fill colors. To use different
fill colors, simply add the corresponding class to the main
parent element. Available color classes are
is-info, is-success,
is-warning and is-danger. Check out
the code example to learn more about the required markup and
Javascript.
//Markup
<div class="field">
<div class="control">
<div class="noui-base-slider is-small"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-info is-small"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-success is-small"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-warning is-small"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-danger is-small"></div>
</div>
</div>
//Javascript
var sliders = document.getElementsByClassName('noui-base-slider');
for (var i = 0; i < sliders.length; i++) {
noUiSlider.create(sliders[i], {
start: [10, 90],
connect: true,
orientation: "horizontal",
range: {
'min': 0,
'max': 100
},
});
}
Rounded Handles
NoUI Sliders can have rounded handles. To use rounded handles,
simply added the is-rounded class to the main
parent element. Check out the code example to learn more about
the required markup and Javascript.
//Markup
<div class="field">
<div class="control">
<div class="noui-base-slider is-small is-rounded"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-info is-small is-rounded"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-success is-small is-rounded"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-warning is-small is-rounded"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-danger is-small is-rounded"></div>
</div>
</div>
//Javascript
var sliders = document.getElementsByClassName('noui-base-slider');
for (var i = 0; i < sliders.length; i++) {
noUiSlider.create(sliders[i], {
start: [10, 90],
connect: true,
orientation: "horizontal",
range: {
'min': 0,
'max': 100
},
});
}
Slider Tooltips
NoUI Sliders can have tooltips to display the currently
selected value. If you want your tooltip to be shown
permanently instead of on slide, simply add the
has-fixed-tooltip to the main parent element.
Check out the code example to learn more about the required
markup and Javascript.
//Markup
<div class="field">
<div class="control">
<div class="noui-tooltip-slider is-small has-fixed-tooltip"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-info is-small is-rounded"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-success is-small is-rounded"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-warning is-small is-rounded"></div>
</div>
</div>
<div class="field">
<div class="control">
<div class="noui-base-slider is-danger is-small is-rounded"></div>
</div>
</div>
//Javascript
var tooltipSliders = document.getElementsByClassName('noui-tooltip-slider');
for (var i = 0; i < tooltipSliders.length; i++) {
var randomStart = (Math.floor(Math.random() * 101));
noUiSlider.create(tooltipSliders[i], {
start: [randomStart],
connect: [true, false],
tooltips: [true],
range: {
'min': 0,
'max': 100
}
});
}