Como último recurso decidí m pedir ayuda acá. Ya no se ni que inventar para que funcione y tengo al cliente bastante nervioso con este tema.
Estoy teniendo problemas con el formato de los numeros generados por medio de un slide. Empeiza desde $10.000 hasta un $1.000.000 pero claro sin las comas (es un trabajo para el exterior) se ven 10000 y el máximo total 2000000 es decir, es bastante molesto para la vista.
Aqui subí el ejemplo: http://www.matiasjaubet.com/ayuda/
El plugin que estoy utilizando, al cual le cambié la estética, es este: http://amirolahmad.github.io/bootstrap-pricing-slider/
He probado con algunos JS que sirven, pero solo para casos con input donde el usuario va ingresando el numero. No me ha funcionando para este tipo de trabajo.
El código jquery es el siguiente (incluye la operacion matematica):
Los numeros que deberían tener comas (,) son el de MONTHLY REVENUE y el ADDITIONAL REVENUE.
Código HTML:
$(document).ready(function() {
$("#slider").slider({
range: "min",
animate: true,
value: 1,
min: 10000,
max: 1000000,
step: 10000,
slide: function(event, ui) {
update(1,ui.value); //changed
}
});
$("#slider2").slider({
range: "min",
animate: true,
value:20,
min: 0,
max: 100,
step: 10,
slide: function(event, ui) {
update(2,ui.value); //changed
}
});
//Added, set initial value.
$("#amount").val(10000);
$("#duration").val(20);
$("#amount-label").text(0);
$("#duration-label").text(0);
update();
});
function update(slider,val) {
var $amount = slider == 1?val:$("#amount").val();
var $duration = slider == 2?val:$("#duration").val();
/* commented
$amount = $( "#slider" ).slider( "value" );
$duration = $( "#slider2" ).slider( "value" );
*/
$total = (($amount * $duration / 100));
$( "#amount" ).val($amount);
$( "#amount-label" ).text($amount);
$( "#duration" ).val($duration);
$( "#duration-label" ).text($duration);
$( "#total" ).val($total);
$( "#total-label" ).text($total);
$('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$duration+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
