Jump to content
ndias

criar uma linha com select option

Recommended Posts

alguém sabe como eu faço para criar uma linha igual da imagem anexa para clicar segurando com o botão esquerdo do mouse e arrastar as duas pontas pra esquerda e direita até o valor desejado?

print.jpg

Share this post


Link to post
Share on other sites

obrigado! achei um exemplo simples usando a biblioteca bootstrap-slider versão 9.9.0 e agora to com dificuldade de colocar um evento para chamar uma função que tenho...

 

meu código tá assim:

 

           <input id="ex12c" type="text" />
            <script>
            $("#ex12c").slider({ id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });
            var sliderC = new Slider("#ex12c", { id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });   
            </script>

 

se tentar chamar no JQuery assim, não funciona:


            $("#ex12c").change(function(){
                return minhaFunction(this.value);
            }); 

 

se eu colocar direto na input, funciona mas fica num loop infinito:

 

<input id="ex12c" type="text" onchange="minhaFunction(this.value)" />

 

o ideal era chamar a função quando soltasse o range...

 

alguma solução onkeyup?

Share this post


Link to post
Share on other sites
18 horas atrás, ndias disse:

obrigado! achei um exemplo simples usando a biblioteca bootstrap-slider versão 9.9.0 e agora to com dificuldade de colocar um evento para chamar uma função que tenho...

 

meu código tá assim:

 

           <input id="ex12c" type="text" />
            <script>
            $("#ex12c").slider({ id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });
            var sliderC = new Slider("#ex12c", { id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });   
            </script>

 

se tentar chamar no JQuery assim, não funciona:


            $("#ex12c").change(function(){
                return minhaFunction(this.value);
            }); 

 

se eu colocar direto na input, funciona mas fica num loop infinito:

 

<input id="ex12c" type="text" onchange="minhaFunction(this.value)" />

 

o ideal era chamar a função quando soltasse o range...

 

alguma solução onkeyup?

 

desisti da biblioteca bootstrap-slider e parti para uma solução polyfill em HTML5.

 

<input type="range" multiple value="10,80" />

 

Veja o JavaScript:

 

(function() {
"use strict";

var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

self.multirange = function(input) {
    if (supportsMultiple || input.classList.contains("multirange")) {
        return;
    }

    var value = input.getAttribute("value");
    var values = value === null ? [] : value.split(",");
    var min = +(input.min || 0);
    var max = +(input.max || 100);
    var ghost = input.cloneNode();

    input.classList.add("multirange", "original");
    ghost.classList.add("multirange", "ghost");

    input.value = values[0] || min + (max - min) / 2;
    ghost.value = values[1] || min + (max - min) / 2;

    input.parentNode.insertBefore(ghost, input.nextSibling);

    Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
        // Fuck you Safari >:(
        get: function() { return this.value; },
        set: function(v) { this.value = v; }
    });

    Object.defineProperties(input, {
        valueLow: {
            get: function() { return Math.min(this.originalValue, ghost.value); },
            set: function(v) { this.originalValue = v; },
            enumerable: true
        },
        valueHigh: {
            get: function() { return Math.max(this.originalValue, ghost.value); },
            set: function(v) { ghost.value = v; },
            enumerable: true
        }
    });

    if (descriptor.get) {
        // Again, fuck you Safari
        Object.defineProperty(input, "value", {
            get: function() { return this.valueLow + "," + this.valueHigh; },
            set: function(v) {
                var values = v.split(",");
                this.valueLow = values[0];
                this.valueHigh = values[1];
                update();
            },
            enumerable: true
        });
    }

    ghost.oninput = input.oninput.bind(input);

    function update() {
        ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
        ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
    }

    input.addEventListener("input", update);
    ghost.addEventListener("input", update);

    update();
}

multirange.init = function() {
    [].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
}

if (document.readyState == "loading") {
    document.addEventListener("DOMContentLoaded", multirange.init);
}
else {
    multirange.init();
}

})();

 

 

Meu desafio agora são dois:

1- Ao mover o range, mostrar instantaneamente o valor esquerdo e direito;

2- Após arrastar o range e soltar o botão do mouse, chamar minha função, passando a value esquerda e direita juntas (por ex 10,80). 

Share this post


Link to post
Share on other sites
4 horas atrás, ndias disse:

 

desisti da biblioteca bootstrap-slider e parti para uma solução polyfill em HTML5.

 

<input type="range" multiple value="10,80" />

 

Veja o JavaScript:

 

(function() {
"use strict";

var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

self.multirange = function(input) {
    if (supportsMultiple || input.classList.contains("multirange")) {
        return;
    }

    var value = input.getAttribute("value");
    var values = value === null ? [] : value.split(",");
    var min = +(input.min || 0);
    var max = +(input.max || 100);
    var ghost = input.cloneNode();

    input.classList.add("multirange", "original");
    ghost.classList.add("multirange", "ghost");

    input.value = values[0] || min + (max - min) / 2;
    ghost.value = values[1] || min + (max - min) / 2;

    input.parentNode.insertBefore(ghost, input.nextSibling);

    Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
        // Fuck you Safari >:(
        get: function() { return this.value; },
        set: function(v) { this.value = v; }
    });

    Object.defineProperties(input, {
        valueLow: {
            get: function() { return Math.min(this.originalValue, ghost.value); },
            set: function(v) { this.originalValue = v; },
            enumerable: true
        },
        valueHigh: {
            get: function() { return Math.max(this.originalValue, ghost.value); },
            set: function(v) { ghost.value = v; },
            enumerable: true
        }
    });

    if (descriptor.get) {
        // Again, fuck you Safari
        Object.defineProperty(input, "value", {
            get: function() { return this.valueLow + "," + this.valueHigh; },
            set: function(v) {
                var values = v.split(",");
                this.valueLow = values[0];
                this.valueHigh = values[1];
                update();
            },
            enumerable: true
        });
    }

    ghost.oninput = input.oninput.bind(input);

    function update() {
        ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
        ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
    }

    input.addEventListener("input", update);
    ghost.addEventListener("input", update);

    update();
}

multirange.init = function() {
    [].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
}

if (document.readyState == "loading") {
    document.addEventListener("DOMContentLoaded", multirange.init);
}
else {
    multirange.init();
}

})();

 

 

Meu desafio agora são dois:

1- Ao mover o range, mostrar instantaneamente o valor esquerdo e direito;

2- Após arrastar o range e soltar o botão do mouse, chamar minha função, passando a value esquerda e direita juntas (por ex 10,80). 

 

 

Consegui resolver assim:

 

<input type="range" multiple value="10,80" oninput="display.value=value" onchange="minhaFunction(display.value)" /> 

<input type="text" id="display" value="10,80" readonly>

 

Valeu!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lezão
      Boa tarde, meus amigos!
      Td bem com vcs?
       
      Tenho um Select em ASP que tbm trabalho que roda normal.
      "SELECT * FROM Banners order by RND(INT(NOW*id_banners)-NOW*id_banners)"  
      E gostaria que roda se em PHP tbm mas infelizmente não estou conseguindo realizar esse acontecimento.
      "SELECT * FROM Produtos where Banners = 'Sim' order by RND(INT(NOW*Banners)-NOW*Banners)"  
      Desde ja muito obrigado!
       
    • By fideles
      Fala pessoal, tudo tranquilo?
       
      Venho recorrer a vós pois já não consigo mais.... 
       
      Tenho um campo select com algumas opções de nome.
      <select class="seleciona_nome"> <option value="Joao">Joao</option> <option value="Julio">Julio</option> <option value="Pedro">Pedro</option> </select>  
      E um campo input do tipo "text"
      <input type="text" class="opcaoSelect" autocomplete="off" disabled="disabled">  
      Preciso que ao selecionar uma opção do "Select" seja auto preenchido no input. Tenho um codigo que funcionava e não sei mais porque não funciona, veja abaixo;
       
      <script> $(document).ready(function(){ $('.seleciona_nome').on('change', addOption); }); function addOption(){ $('.opcaoSelect').val(this.value); } </script>  
      Peço ajuda ai caso alguém consiga me ajudar a entender porque este não funciona mais.
       
      Obrigado.
       
    • By mr22robot
      Boa tarde. 
      Oque eu preciso: Retornar registros sem repetir os que começam com os mesmo nomes.
      Ex: 
      em uma tabela eu tenho:
      Rafael Vieira
      Rafael Martins
      Lucia Vieira
       
      Deve retornar: 
      Rafael Vieira
      Lucia Vieira. 
      Neste caso eu faria para comparar as 5 primeiras letras. pra mim já serve. Pq o que eu preciso é:
      Comparar os 8 primeiro digitos de CNPJ  em uma tabela e ignorar os que começam iguais.
      Alguem consegue me ajudar?
      Muito grato
    • By danilo759
      Estou com uma dúvida, em uma tabelinha é cadastrado a data em uma coluna e a hora em outra coluna, então para "juntar" podemos usar CONCAT() no SELECT. Tudo certo...
       
      SELECT id, CONCAT(data_ini, ' ', hora_ini) as inicio FROM tabela

      Retorna como esperado:

       

      Minha dúvida é, se eu quiser exibir o horário de término para ficar assim como seria a consulta? Lembrando que não existe as colunas data_final e horario_final.

      2020-09-13 03:00:00 2020-09-13 04:00:00
      2020-09-13 04:00:00 2020-09-13 05:00:00
      2020-09-13 05:00:00 ....
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.