criar uma linha com select option

[ndias 2]

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?

[MatheusMS21 0]

De uma olhada sobre  Range Slider, tem bastante conteúdo.

 

Na W3C tem um ótimo conteúdo sobre, segue o link:

https://www.w3schools.com/howto/howto_js_rangeslider.asp

 

 

 

 

[ndias 2]

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?

[ndias 2]

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). 

[ndias 2]

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!