Cara vc tem que seguir o que está na documentação. Apesar que eu achei a documentação insuficiente...
Veja aqui o exemplo funcionando, repare que tem que importar o jQuery, o JS do Slider e o CSS dele. Depois vc tem que iniciar o script
no documento e configurar o campo input
.
É importante colocar a tag <output>
após a tag input
!
<!-- script para ativar a barra -->
$(function () {
var $document = $(document);
var selector = '[data-rangeslider]';
var $inputRange = $(selector); /** * Example functionality to demonstrate a value feedback * and change the output's value. */
function valueOutput(element) {
var value = element.value;
var output = element.parentNode.getElementsByTagName('output')[0];
output.innerHTML = value;
} /** * Initial value output */
for (var i = $inputRange.length - 1; i >= 0; i--) {
valueOutput($inputRange[i]);
}; /** * Update value output */
$document.on('input', selector, function (e) {
valueOutput(e.target);
}); /** * Initialize the elements */
$inputRange.rangeslider({
polyfill: false
}); /** * Example functionality to demonstrate programmatic value changes */
$document.on('click', '#js-example-change-value button', function (e) {
var $inputRange = $('[data-rangeslider]', e.target.parentNode);
var value = $('input[type="number"]', e.target.parentNode)[0].value;
$inputRange.val(value).change();
}); /** * Example functionality to demonstrate programmatic attribute changes */
$document.on('click', '#js-example-change-attributes button', function (e) {
var $inputRange = $('[data-rangeslider]', e.target.parentNode);
var attributes = {
min: $('input[name="min"]', e.target.parentNode)[0].value,
max: $('input[name="max"]', e.target.parentNode)[0].value,
step: $('input[name="step"]', e.target.parentNode)[0].value
};
$inputRange.attr(attributes).rangeslider('update', true);
}); /** * Example functionality to demonstrate destroy functionality */
$document.on('click', '#js-example-destroy button[data-behaviour="destroy"]', function (e) {
$('input[type="range"]', e.target.parentNode).rangeslider('destroy');
}).on('click', '#js-example-destroy button[data-behaviour="initialize"]', function (e) {
$('input[type="range"]', e.target.parentNode).rangeslider({
polyfill: false
});
});
});
/* css do texto do output */
output {
display: block;
font-size: 30px;
font-weight: bold;
text-align: center;
margin: 30px 0;
}
<!-- css da barra -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" />
<!-- scripts da barra e o jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script>
<input type="range" min="10" max="1000" step="10" value="300" data-rangeslider="" style="opacity:0;" >
<output ></output>