HTML criar uma linha com select option

[nldj]

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

[DiF]

@nldj Você pode fazer isso com CSS3 e HTML5

 

Veja uns exemplos: http://danielstern.ca/range.css/#/

 

Pesquisa do google sobre como fazer input sliders

[nldj]

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?

[DiF]

@nldj Como você está usando o jQuery você precisa chamar o valor pelo val()  e não this.value.

 

Tente desta forma:

var valor = $(this);
$("#ex12c").change(function(){
       minhaFunction(valor.val());
 }); 

Veja um exemplo chamando uma função em um evento: https://jsfiddle.net/dife/f7js86vz/

[nldj]

17 horas atrás, DiF disse:

@nldj Como você está usando o jQuery você precisa chamar o valor pelo val()  e não this.value.

 

Tente desta forma:

var valor = $(this);
$("#ex12c").change(function(){
       minhaFunction(valor.val());
 }); 

Veja um exemplo chamando uma função em um evento: https://jsfiddle.net/dife/f7js86vz/

assim não deu certo...

 

mas assim, funcionou:

$("#ex12c").slider({ id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] })
            $("#ex12c").change(function(){minhaFunction($(this).val())});
var sliderC = new Slider("#ex12c", { id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] })
            $("#ex12c").change(function(){minhaFunction($(this).val())});

 

porém, a mesma coisa: Entra num loop infinito!

[nldj]

@DiF 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 : {
        // ***** 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, ***** 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). 

 

[nldj]

 

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!