0

Coloquei uma slidebar em meu projeto com valores de 0 a 10 e gostaria que ela mostrasse esses valores escolhidos pelo usuário abaixo ou acima dela, peguei alguns exemplos na internet e tentei modificar e tive problemas para isso. O slidebar que usei foi esse aqui: http://rangeslider.js.org/ - Nesse site, logo no primeiro exemplo do slidebar ele mostra como eu gostaria que ficasse, com o valor do slidebar logo abaixo dele. Como posso colocar esse valor?

Aqui está o código que estou usando, inclusive, o input também. http://jsfiddle.net/k176syhL/

1 Resposta 1

0

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>
    

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .