====== sliderNumFormat - Format slider scale and value numbers ======
The **sliderNumFormat** function formats scale numbers (above the sliders) and values (appear when you drag a slider). It allows scale and value formats to be the same or different. The function uses **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** to format numbers in a variety of styles based on locale or locales. Some of the possibilities include:\\ 
  * Thousands separators (e.g., 1,000)
  * Decimals (e.g., 1,000.00)
  * Currency (e.g., $1,000)
  * Percents (e.g., 100%)
  * Units (e.g., 16 l, 16l, or 16 liters)
  * Scientific (e.g., 1.000E3)
  * Compact (e.g., $1K)

sliderNumFormat works with all Qualtrics layouts including "New Survey Experience" (aka Simple layout).

Here is a simple example:\\
{{ ::sliderNumFormat.mp4?800 |sliderNumFormat Example}}

This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/XMcommunity/messages/add/TomG|TomG]]** on the Qualtrics Community to learn more.
===== Set-up Instructions =====
==== Survey Header ====
=== Add jQuery (only if using New Survey Experience) ===
<code>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js">
</code>
=== Add sliderNumFormat Function ===
Add the sliderNumFormat function to the survey header to make it available to any question in the survey. Go to Look & Feel -> General -> Header edit -> {{::icon_source.jpg?20|}} and paste the provided sliderNumFormat function JS:
<code>
<script>/*Paste sliderNumFormat function JS here*/</script>
</code>
Alternatively, paste the sliderNumFormat function JS into a question's JS __outside__ the existing Qualtrics functions to make it available to questions on the page.
==== JavaScript Function Call ====
Add JS to call the sliderNumFormat function to apply it to the Slider question as follows:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	sliderNumFormat(this);
});
</code>

To override the default options, specify the desired **[[sliderNumFormat#Options|options]]** in the second function argument as an object. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	sliderNumFormat(this,{format:{style:"currency",currency:"USD",maximumFractionDigits:0}});
});
</code>
===== Options =====
==== format ====
**format** is a object used to specify the Intl.NumberFormat() formatting options. Options are specified the same way as in the **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** options object.  **format** applies to both scale and value numbers.

Default: {} (empty, use Intl.NumberFormat() option defaults)
==== locale ====
**locale** is a string or array that specifies the locale or locales to be used by Intl.NumberFormat().

Default: %%"en-US"%%
==== valueFormat ====
**valueFormat** is an object that specifies the Intl.NumberFormat() formatting options for value numbers. Options are specified the same way as in the **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** options object. If the same option is included in the **[[sliderNumFormat#format|format]]** option the **valueFormat** option takes precedence. 

Default: {}
==== scaleFormat ====
**scaleFormat** is an object that specifies the Intl.NumberFormat() formatting options for scale numbers. Options are specified the same way as in the **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** options object. If the same option is included in the **[[sliderNumFormat#format|format]]** option the **scaleFormat** option takes precedence. 

Default: {}
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]