How to take the value of a slidebar and show in an output?

Question

I put a slidebar in my project with values from 0 to 10 and would like it to show these values chosen by the user below or above it, I took some examples on the internet and tried to modify and had problems for that. The slidebar I used was this one: http://rangeslider.js.org/ - On this site, right in the first example of the slidebar it shows how I would like it to stay, with the value of the slidebar just below it. How can I put this value?

Here’s the code I’m using, including the input as well. http://jsfiddle.net/k176syhL/

Answer 1

Face you have to follow what is in the documentation. Although I found the documentation insufficient...

See here the example working, notice that you have to import jQuery, Slider JS and his CSS. After you have to start the script in the document and configure the field input.

It is important to 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>
<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>