Add commas for numbers/pricing for jQRangeSlider

[s-wild]

I have this code here which initiates the slider:

jQuery("#slider").rangeSlider({ bounds: { min: 300000, max: 625000 }, defaultValues: { min: 350000, max: 600000 }, step: 25000 });

I then bind the function to do a bunch of sorting in my HTML: jQuery("#slider").bind("valuesChanging", function(e, data) { pricingSort(data.values.min, data.values.max); });

However, this is a price range, I include a dollar sign using a CSS before pseudo.

I now want to include a comma between number values. I know I can use: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString to convert the number, but this will mess up my filtering as it is set to an integer and not a string.

Is there a way to display a value and a label using this library?

[s-wild]

For anyone stuck on this, I found a solution using a before pseudo element and a html data attribute in the HTML with CSS/jQuery (not sure if it is the best solution):

// Set values for page load.
jQuery(".ui-rangeSlider-leftLabel .ui-rangeSlider-label-value").attr("data-value", "350,000");
jQuery(".ui-rangeSlider-rightLabel .ui-rangeSlider-label-value").attr("data-value", "600,000");

// Set values when user uses the slider.
jQuery("#slider").bind("valuesChanging", function(e, data) {
          jQuery(".ui-rangeSlider-leftLabel .ui-rangeSlider-label-value").attr("data-value", data.values.min.toLocaleString(
               undefined, // use a string like "en-US" to override browser locale
               { minimumFractionDigits: 0 }
          ));
          jQuery(".ui-rangeSlider-rightLabel .ui-rangeSlider-label-value").attr("data-value", data.values.max.toLocaleString(
               undefined, // use a string like "en-US" to override browser locale
               { minimumFractionDigits: 0 }
          ));
});

Which will make the HTML look like this:

<div class="ui-rangeSlider-label-value" data-value="600,000">600000</div>`

I then use css content (with a bit of a hacky way of hiding the existing values being displayed):

.ui-rangeSlider-label-value {
            font-size: 0;
            &:before {
                content: '$' attr(data-value);
                font-size: 16px;
            }
        } 

Then voila, we have our commas:

[ghusse]

You can simply use the formatter option: https://ghusse.github.io/jQRangeSlider/options.html#formatterOption