Atif Atif - 1 month ago 6
jQuery Question

Change Price Format - Bootstrap Price Slider

I am using bootstrap slide, you can find code from here
http://bootsnipp.com/snippets/2XQ2

How can i change the price format, right now its showing like this $1000.

I want something like this $1,000 and so on $150,000.

<script>
$(document).ready(function() {
$("#slider").slider({
range: "min",
animate: true,
value:1,
min: 10000,
max: 300000,
step: 100,
slide: function(event, ui) {
update(1,ui.value); //changed
}
});

//Added, set initial value.
$("#amount").val(0);
$("#amount-label").text(0);
update();
});

//changed. now with parameter
function update(slider,val) {
//changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
var $amount = slider == 1?val:$("#amount").val();

$total = "£" + ($amount * 10);
$( "#amount" ).val($amount);
$( "#amount-label").text($amount);
$( "#total" ).val($total);
$( "#total-label" ).text($total);

$('#spend').html('<label> '+$amount+' </label>');
}

</script>

Answer

I do the code for you in javascript:

Delete your update function and paste this one

function update(slider,val) {
      var formatNumber = {
         separador: ",", 
         sepDecimal: '.',
         formatear:function (num){
          num +='';
          var splitStr = num.split('.');
          var splitLeft = splitStr[0];
          var splitRight = splitStr.length > 1 ? this.sepDecimal + splitStr[1] : '';
          var regx = /(\d+)(\d{3})/;
          while (regx.test(splitLeft)) {
          splitLeft = splitLeft.replace(regx, '$1' + this.separador + '$2');
          }
          return this.simbol + splitLeft  +splitRight;
         },
         new:function(num, simbol){
          this.simbol = simbol ||'';
          return this.formatear(num);
         }
        }
    //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
    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);
     $total = formatNumber.new($total,"$"); 
     $( "#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>');
  }