Add commas for numbers/pricing for jQRangeSlider #225

Activity

1. s-wild commented on Aug 21, 2017

   

   s-wild

   on Aug 21, 2017

   Last edited by s-wild

   Author

   More actions

   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:

   
2. s-wild

   changed the title [-]Added commas onto display for numbers[/-] [+]Add commas onto display for numbers/pricing[/+] on Aug 21, 2017
3. s-wild

   changed the title [-]Add commas onto display for numbers/pricing[/-] [+]Add commas for numbers/pricing for jQRangeSlider[/+] on Aug 21, 2017
4. ghusse commented on Aug 21, 2017

   

   ghusse

   on Aug 21, 2017

   Owner

   More actions

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

   👍React with 👍1Reacted by Konstantin