Agregar comas en numeros generados por slide range

Hola a todos!
Como último recurso decidí m pedir ayuda acá y en otro foro. 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 números generados por medio de un slide. Empieza desde $10.000 hasta un $2.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 Javascript :

$(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>');

Por favor, alguna idea que me pueda ayudar a resolver este conflicto visual?

Eso pasa por utilizar plugins sin saber ni como funcionan.

En fin ubicas la linea que dice:

Código Javascript :

var $amount = slider == 1?val:$("#amount").val();

ahora solo has lo siguiente:

Código Javascript :

$amount = $amount.toLocaleString("es-MX");

y listo, para mayor información:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Gracias elporfirio.
Tenés razón, mi jquery es realmente muy básico, al menos para estos casos. Hice un curso y lo primero que nos aconsejaron era hacer nuestros propios plugins. En fin, ya me meteré a estudiar bien los videos para sacarle provecho al Jquery.
Gracias por tu ayuda, me ha servido mucho.
Al ser una operación matemática imagino que lo complica un poco, pero me has dado el empujón para seguir investigando y terminarlo funcionando.
Gracias!!