Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
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?>
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).>
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!
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