I put a slidebar in my project with values from 0 to 10 and I would like it to display those values chosen by the user below or above it, I took some examples on the internet and tried to modify it and had problems with it. The slidebar I used was this one: link - In this site, right in the first slidebar example it shows how I would like it to be, with the value of the slidebar just below it. How can I put this value?
Here is the code I'm using, including the input as well. link
Dude, you have to follow what's in the documentation. Although I found the documentation insufficient ...
Here's the working example, notice that you have to import jQuery, Slider JS, and CSS from it. Then you have to start script in the document and set the input field.
It is important to put the tag <output> after the 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><scriptsrc="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>