Search code examples
javascriptjqueryjquery-pluginssliderround-slider

jQuery Round Slider add shorthand values to range

I'm using Round Slider in my application where the slider type is range. My range varies from 0-2 million. I have a requirement where if the value is above 1000, it should be represented such as 1k (1200 as 1.2k), and if the value is above 1000000, it should be represented such as 1M (1200000 as 1.2M). So far I could not find a way to do this.

If there is a way to do this?

Thanks in advance

Solution

  • You can use tooltipFormat property to achieve this behaviour

    HTML

    <div id="slider"></div>

    JS

    window.formatter = function(e) {
  if (e.value >= 1000000) {
    return Math.round(e.value / 100000) / 10 + "M";
  }
  if (e.value >= 1000) {
    return Math.round(e.value / 100) / 10 + "k";
  }
  return e.value;
}

$("#slider").roundSlider({
  sliderType: "min-range",
  value: 45,
  max: 2000000,
  tooltipFormat: "formatter"
});

    http://jsfiddle.net/osjo/4g5r0mex/4/